Bootstrap add up more than 12

Question

I have to pull data from a database into columns, but the total columns add up to more than 12. The columns have different heights. This messes up the grid. Does anyone know how to solve this?

<div class="container">
  <div class="row">   
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
  </div>
 </div>

Yes, PHP. I'm working on a Wordpress theme actually, but it's basically the same thing. — Neluțu, Aug 02 '14 at 16:18

score 1 · Answer 1 · answered Aug 02 '14 at 16:28

Option 1 is to add a standard height to all of your <div>. So you could create a class like .div-200px.

Change your <div class="col-md-3"> to <div class="div-200px col-md-3">

Edit your CSS:

 .div-200px {
     height: 200px; 
}

Option 2 is to create a foreach loop and add a new <div class="row"> for every 4 products.

<div class="container">
    <?php $count = 0;
    foreach($data as $item){
        if(is_int($count/4)){ ?>
            <div class="row">
        <?php } ?>
            <div class="col-md-3"> <?=$item?> </div>
        if($count>0 AND is_int($count/4)){ ?>
            </div>
        <?php } 
        $count++;
    } ?>
</div>

That's not the prettiest thing but it should work.

Thank you, I was hopeing for a CSS trick that doesn't involve a fixed height. — Neluțu, Aug 03 '14 at 12:09
The first option will not work for the use cases where the height is not known. — jporcenaluk, May 31 '15 at 16:40

score 0 · Answer 2 · answered Aug 03 '14 at 21:24

0

There is another option with CSS, add a "item" class to your col-md-3 divs and give it the following css:

.item:nth-child(4n+1){
    clear:left
}

answered Aug 03 '14 at 21:24

NicoFerna

571
2
10

Thank you, works very well. – Neluțu Sep 22 '14 at 16:12

score -1 · Answer 3 · answered Aug 02 '14 at 16:38

-1

I think you should not solve this with bootstrap grid system at all. Just use <table> tag and stop caring about a number of columns. Responsiveness shouldn't suffer

answered Aug 02 '14 at 16:38

Roman Kolpak

1,842
20
22

This really depends on what the content is. A table may or may not have the styling OP is looking for. It is a good suggestion though it's not necessarily an answer to this question. – Dan Aug 02 '14 at 16:40

Bootstrap add up more than 12

3 Answers3