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

Question

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>

'look nice' is rather a general term. Can you be more specific? — George, Nov 09 '15 at 18:24
My apologies, I thought it was self explanatory. I would like the images to be displayed floating left. In the image above you see two images floating right, then finally last one alone in a row. To me it looks like it should be room to have 2 rows. One with 4 items, the other with 3 — Shervin Asgari, Nov 09 '15 at 18:26
This looks like a place that flexbox would come in handy. Bootstrap grid functionality is pretty limited. — Jack Guy, Nov 09 '15 at 18:27
That's because the columns are of varied heights. None of your floats are cleared so it appears like that. — George, Nov 09 '15 at 18:27
@George Sorry, I am very bad at CSS. I also figured it was something like that. How can I fix it? Give it a fixed height? — Shervin Asgari, Nov 09 '15 at 18:28
@J4G: I will not change to another framework. I will have to fix it with what is available in the twitter bootstrap universe — Shervin Asgari, Nov 09 '15 at 18:30
Giving the columns a fixed height (perhaps a `min-height`) would certainly solve this problem. But you may only want the minimum heights to be applied when the columns are not stacked up (non-mobile devices) — George, Nov 09 '15 at 18:30
[Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) isn't another framework, it's a new CSS feature — Jack Guy, Nov 09 '15 at 18:30
@J4G A CSS feature that bootstrap is in fact taking advantage of in [version 4](http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/) :) — George, Nov 09 '15 at 18:32
There are multiple ways to fix this issue explained here: http://stackoverflow.com/questions/22310912/bootstrap-row-with-columns-of-different-height/22311212#22311212 — Carol Skelly, Apr 28 '17 at 11:27

score 1 · Answer 1 · answered Nov 09 '15 at 18:30

1

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;

answered Nov 09 '15 at 18:30

Jesse van Muijden

325
2
9

This almost worked. However, the text suddenly is inside the image. Look at the following: http://bildr.no/view/R2g1YzNq – Shervin Asgari Nov 09 '15 at 18:52
play with the the amount of pixels padding-bottom of .thumbnail use that same amount of pixels for .caption height. This can lead to text overflowing the container, but you can make that look better using overflow:hidden or text-overflow: ellipsis, etc. – Jesse van Muijden Nov 09 '15 at 19:01

score 1 · Accepted Answer · answered Nov 09 '15 at 18:35

1

Define a constant height to "thumbnail" class.

answered Nov 09 '15 at 18:35

Anuj Rastogi

98
6

What should this height be? – Shervin Asgari Nov 09 '15 at 18:52
Thanks. This was the easiest. I set it to 320px. – Shervin Asgari Nov 09 '15 at 19:03

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

2 Answers2