How to have multiple Columns in Bootstrap row

Question

I am using Bootstrap 3. I have one row that will hold a variable amount of columns, ranging from 1-let's say 9.

The are currently set to col-lg-4, so three should display on one row. I would normally create a new row, but since I am dynamically adding columns, I cannot do this, or at least do no know how.

When my client adds a post, it automatically creates a column with content.

The problem lies only in Firefox & IE, in both desktop and mobile views. The 4th item (or 1st item that should go to the next row) gets pushed to a new line and is offset. See screenshot below.

I am using ExpressionEngine as my CMS.

It displays perfectly in Chrome.

Code Below

<div class="container">
        <div class="row">                   
            {exp:channel:entries channel="plans" orderby="title" sort="asc"}
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 centered">             
                <div class="grid mask">
                    <figure>
                        <img class="img-responsive" src="{plan_main_image}">
                        <figcaption>
                            <h5>{title}</h5>
                            <a data-toggle="modal" href="#{url_title}" class="btn btn-primary btn-lg">View Floor Plan</a>
                        </figcaption>
                    </figure>
                </div>
            </div>  
            <div class="modal fade" id="{url_title}" tabindex="-1" role="dialog" aria-labelledby="{url_title}" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                      <h4 class="modal-title">{title}</h4>
                    </div>
                    <div class="modal-body text-left">
                        <div class="row">   
                            <div class='list-group gallery'>
                                <div class="col-lg-4">
                                    <a class="thumbnail fancybox-effects-d" data-fancybox-group="" href="{plan_main_image}">
                                        <img class="img-responsive" alt="" src="{plan_main_image}" />
                                    </a>
                                </div>
                                <div class="col-lg-4">
                                    <a class="thumbnail fancybox-effects-d" data-fancybox-group="" href="{plan_first_level}">
                                        <img class="img-responsive" alt="" src="{plan_first_level}" />
                                    </a>
                                </div>
                                <div class="col-lg-4">
                                    <a class="thumbnail fancybox-effects-d" data-fancybox-group="" href="{plan_second_level}">
                                        <img class="img-responsive" alt="" src="{plan_second_level}" />
                                    </a>
                                </div>
                            </div>
                        </div>  
                        <div class="row">
                            <div class="col-lg-12">
                                {plan_description}
                            </div>
                        </div>  
                        <!--<div class="row">
                            <div class="col-lg-12">
                                <b><a href="{plan_floor_plan_pdf}" download="{plan_floor_plan_pdf}">Download the floor plan</a></b>
                            </div>
                        </div>-->                                                     
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                  </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
              </div><!-- /.modal -->
            {/exp:channel:entries}                                                      
        </div><!-- /row -->
        <br>
        <br>            
    </div><!-- /row -->
</div><!-- /container -->

Thanks

enter image description here

The reason for this is because the first image is slightly taller than the other images. You need to use a responsive column reset for this. See here: http://getbootstrap.com/css/#grid-example-wrapping. For more complex scenarios or more details, see my answer here: http://stackoverflow.com/questions/24571062/gap-in-bootstap-stacked-rows — jme11, Sep 18 '14 at 16:37
Expanding on the above, that's common float behavior when all is not the exact same height, you can put it in a row OR clear it with a responsive clearfix OR use masonry or equiv script. — Christina, Sep 18 '14 at 17:31
Has nothing to do with EE. It's a clearing issue. The boxes have to be the same height in order to do what you want, because you won't know where to put the clearfix, which is the same issue as wrapping it in a .row. — Christina, Sep 18 '14 at 17:33
@jme11 If you can mark your answer as an actual answer and not a comment, I'll vote it up and mark it as the right answer. This worked perfectly. — C.Coggins, Sep 18 '14 at 17:36

score 7 · Accepted Answer · edited May 23 '17 at 10:27

The reason for this is because the first image is slightly taller than the other images. You need to use a responsive column reset for this. See Responsive Column Resets in the doc.

The basic concept is to add a div after the each horizontal grouping that contains a clearfix so that the next horizontal grouping is cleared before and aligns correctly.

For more complex scenarios you can see my answer here: Gap in Bootstrap stacked rows.

How to have multiple Columns in Bootstrap row

1 Answers1

Linked