Twitter Bootstrap - Style more than 12 columns in a row?

ShervinAsgari
November 9, 2015
254 views
0 votes
2 Answers

I have the following code which might or might not give more than 12 columns in a row.
How can I make it look nice if there is 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>

Answers

- JessevanMuijden
- November 9, 2015 at 7:30 pm
- 0 votes
0
The reason your layout does not end up looking nice is the variable height of the column content, specifically in
```
<div class="caption">
```
use css to give the column divs (.thumbnail)
```
position: relative;
// to make space for absolutely positioned caption
padding-bottom: 40px;
```
and .caption
```
position: absolute;
bottom: 0px;
```
Login or Signup to reply.