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

Answer 1

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.