Twitter Bootstrap - style over 12 columns in a row?

I have the following code, which may or may not contain more than 12 columns per row. How can I make it look beautiful if there are more than 12 columns?

<div collapse="gpCollapse"> <div ng-repeat="item in revealedCtrl.greatPersons" class="thumbnail col-md-3"> <img ng-src="/images/useritems/{{item.greatperson.image}}" tooltip="{{item.greatperson.name}}"/> <div class="caption"> <h3 class="text-center">{{item.greatperson.name}}</h3> <p class="text-justify"> {{item.greatperson.description}} </p> </div> </div> </div> 

enter image description here

+4
source share
2 answers

Define the height constant for the thumbnail class.

+1
source

The reason your layout doesn't look nice is the height of the column content variable, in particular, in

 <div class="caption"> 

use css to give column delimiters (.thumbnail)

 position: relative; // to make space for absolutely positioned caption padding-bottom: 40px; 

and .caption

 position: absolute; bottom: 0px; 
+1
source

Source: https://habr.com/ru/post/1235564/


All Articles