bootstrap 3 - clearfix not working

Clearfix makes an element grow in height to contain floated descendents. It is not suitable for this situation. I recommend using "display:inline-block" instead of floats for layouts like that.

Here are some good articles on that:
http://www.search-this.com/2008/08/28/lets-all-get-inline-in-a-block-in-a-block/
http://gtwebdev.com/workshop/layout/inline-block-gallery.php
http://hanamidesign.com/blog/display-inline-block-cross-browser-solutions/
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

no that is not what clearfix is for. The row class already has the properties of clearfix, and it is working as intended.

What clearfix does is give height to the container when its children are floated. For example, if you had two floated divs inside another div, the container div would not have any height. Unless, you applied the clearfix class to the container div, which would give the container height.

.clearfix{
   display: table;
   content: " ";
}

Select allOpen in new window

you can try it out for yourself by applying a background color to your container to see what happens when you add/remove the clearfix class.

I think what you are looking for is  a "masonry" effect. This will remove the extra spaces between the elements. That can't be done with CSS only  AFAIK. But you can do other things, depending on what browsers you intend to support. With modern browsers, you could use CSS columns, and then specify the number of columns inside media queries. And just forget about the bootstrap columns.

Or, get the masonry jquery plugin:
http://masonry.desandro.com/

@Kravimir, oops, you beat me to it :)

@Kyle Hamilton - based on your explanation of clearfix, I think it would be exactly what I need because this:

<div class="col-md-2 col-sm-6 col-xs-12  clearfix" style="border:2px solid red;">

is a a parent of this:

<div class="thumbnail">

However, I've got <div class="col-md-2 col-sm-6 col-xs-12  clearfix" style="border:2px solid red;"> wrapped around each thumbnail and so it won't work.  At issue also is that I'm outputting these thumbnails dynamically, so it's not like I can assign "clearfix" to a row for every 2 thumbnails.  Also, I'm not looking for the masonry effect - I need rows.

Here's my code for one of the thumbnails:

<div class="col-md-2 col-sm-6 col-xs-12 clearfix" style="border:2px solid red;">
   <div class="thumbnail">
 <a class="imgPop" data-toggle="modal" href="#myModal123" onmouseover="showtext('<b>Ed Ruscha<br><i>Fruit-Metrecal Hollywood</i></b><br>1971<br>14 3/4 x 42 3/4 inches<br>Screenprint on paper<br>Edition of 85<br>Signed, dated, and numbered lower right')" onmouseout="hidetext()"><img src="http://ikonltd.com/images/sm/ruscha_fruit-metrecal.jpg" class="img-responsive pull-left" border="0"></a> <div class="caption pull-right">
<b>Ed Ruscha<br><i>Fruit-Metrecal Hollywood</i></b><br>1971<br>14 3/4 x 42 3/4 inches<br>Screenprint on paper<br>Edition of 85<br>Signed, dated, and numbered lower right<p>
                      <a data-toggle="modal" href="#myModal123" class="label label-danger" rel="tooltip" title="Zoom">Zoom</a>
                    <a href="mailto:ikon@ikonltd.com?Subject=re: Ed Ruscha-Fruit-Metrecal Hollywood" class="label label-warning" rel="tooltip" title="Contact Gallery">Contact Gallery</a></p>
</div><!--end caption-->
<!--modal html-->
<div class="modal" id="myModal123">
	<div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title"><span class="modalName">Ed Ruscha:</span> <span class="modalTitle">Fruit-Metrecal Hollywood</span></h4>
          <p><br>1971<br>14 3/4 x 42 3/4 inches<br>Screenprint on paper<br>Edition of 85<br>Signed, dated, and numbered lower right</p><p><a href="mailto:ikon@ikonltd.com?Subject=re: Ed Ruscha-Fruit-Metrecal Hollywood" class="label label-warning" rel="tooltip" title="Contact Gallery">Contact Gallery</a></p>
        </div>
        <div class="modal-body">
        <img src="http://ikonltd.com/images/med/ruscha_fruit-metrecal.jpg" class="img-responsive" border="0"> </div>
              </div>
    </div>
</div>
<!--/modal html-->
<!--modal-->
<script>
$('#openBtn').click(function(){
	$('#myModal123').modal({show:true})
});
</script>
<!--/modal-->
 </div><!--end thumbnail-->
  
   </div><!--end thumb col-->

Select allOpen in new window

I would break your box down to multiple columns, then vertically center the content.  On the right side of the thumbnail div, make the main content text smaller too.

<div class="row thumbnail">
     <div class="col-xs-5"><img src=""></div>
     <div class="col-xs-7 visible-xs-block"><!-- http://getbootstrap.com/css/#responsive-utilities --><h3>Title</h3> Content</div> 
</div>

Select allOpen in new window

I think you will find doing this it will be easier to make the entire row of thumbnail centered vertically if that is what you are after.

Visually, I would think about the smallest amount of headline and text and try and minimize the longer text as well as making the font smaller.

it seems everyone has a different understanding of what you are after. so it would help if you provided some clarification. or an image of the desired result

I agree, an image of what you expect to see will be a big help.  However, I think you can do everything you want using the Bootstrap classes.  I find when most people start customizing what is already available you just get into trouble later.

I'm looking for a 2 column layout - 2 thumbnails per row.

Notice "Jean Tiger Skin" - is being effected by the float.  I'm generating these in an output query so I can't wrap a clearfix or a div around 2 thumbnails -

screen grab:


code:

<div class="row">

 <CFOUTPUT QUERY="newaqimages" startrow="#StartRow_newaqimages#" maxrows="#MaxRows_newaqimages#">
   <div class="col-md-2 col-sm-6 col-xs-12">
   <div class="thumbnail">
 <a class="imgPop"  data-toggle="modal" href="##myModal#AutoArtID#" onMouseover="showtext('<b>#newaqimages.FirstName# #newaqimages.LastName#<br><i>#newaqimages.Title#</i></b><cfif '#newaqimages.Date#' eq ""><cfelse><br></cfif>#newaqimages.Date#<cfif '#newaqimages.WebDescriptionLine1#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine1#<cfif '#newaqimages.WebDescriptionLine2#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine2#<cfif '#newaqimages.WebDescriptionLine3#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine3#<cfif '#newaqimages.WebDescriptionLine4#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine4#<cfif '#newaqimages.WebDescriptionLine5#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine5#')" onMouseout="hidetext()"><img src="http://ikonltd.com/images/sm/#newaqimages.sm#" border="0" class="img-responsive pull-left"></a> <div class="caption pull-right">
<b>#newaqimages.FirstName# #newaqimages.LastName#<br><i>#newaqimages.Title#</i></b><cfif '#newaqimages.Date#' eq ""><cfelse><br></cfif>#newaqimages.Date#<cfif '#newaqimages.WebDescriptionLine1#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine1#<cfif '#newaqimages.WebDescriptionLine2#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine2#<cfif '#newaqimages.WebDescriptionLine3#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine3#<cfif '#newaqimages.WebDescriptionLine4#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine4#<cfif '#newaqimages.WebDescriptionLine5#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine5#<p>
                      <a data-toggle="modal" href="##myModal#AutoArtID#" class="label label-danger" rel="tooltip" title="Zoom">Zoom</a>
                    <a href="mailto:ikon@ikonltd.com?Subject=re: #FirstName# #LastName#-#Title#" class="label label-warning" rel="tooltip" title="Contact Gallery">Contact Gallery</a></p>
</div><!--end caption-->
<!--modal html-->
<div class="modal" id="myModal#AutoArtID#">
	<div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title"><span class="modalName">#newaqimages.FirstName# #newaqimages.LastName#:</span> <span class="modalTitle">#newaqimages.Title#</span></h4>
          <p><cfif '#newaqimages.Date#' eq ""><cfelse><br></cfif>#newaqimages.Date#<cfif '#newaqimages.WebDescriptionLine1#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine1#<cfif '#newaqimages.WebDescriptionLine2#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine2#<cfif '#newaqimages.WebDescriptionLine3#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine3#<cfif '#newaqimages.WebDescriptionLine4#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine4#<cfif '#newaqimages.WebDescriptionLine5#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine5#</p><p><a href="mailto:ikon@ikonltd.com?Subject=re: #FirstName# #LastName#-#Title#" class="label label-warning" rel="tooltip" title="Contact Gallery">Contact Gallery</a></p>
        </div>
        <div class="modal-body">
        <img src="http://ikonltd.com/images/med/#newaqimages.med#" border="0" class="img-responsive"> </div>
              </div>
    </div>
</div>
<!--/modal html-->
<!--modal-->
<script>
$('##openBtn').click(function(){
	$('##myModal#AutoArtID#').modal({show:true})
});
</script>
<!--/modal-->
 </div><!--end thumbnail-->
  
   </div><!--end thumb col-->
      </cfoutput>
  </div><!--end row for image grid-->

Select allOpen in new window

that's a screen grab of the existing layout. please post a picture of what you are looking for.

Notice "Jean Tiger Skin" - is being effected by the float.

I, for one, did notice that. It's one of the biggest downsides to using floats. Hence my suggestion of "display:inline-block". Until multi-line flexbox has deep cross-browser support, it's the best option for this.

Like I said, the issue you are getting is from not fully utilizing the bootstrap framework.   Look below for the simple format

<div class="container">
      <div class="row">
            <div class="col-xs-6"><!-- Left side -->

             <div class="row">
               <div class="col-xs-12"><!-- box of variable length content --></div>
                <div class="col-xs-12"><!-- box of variable length content --></div>
               <div class="col-xs-12"><!-- box of variable length content --></div>
               <div class="col-xs-12"><!-- box of variable length content --></div>
           </div>

            </div>


            <div class="col-xs-6"><!-- rigth side -->

             <div class="row">
               <div class="col-xs-12"><!-- box of variable length content --></div>
                <div class="col-xs-12"><!-- box of variable length content --></div>
               <div class="col-xs-12"><!-- box of variable length content --></div>
               <div class="col-xs-12"><!-- box of variable length content --></div>
            </div>

            </div>
    </div><!-- end row -->

Select allOpen in new window

No yours but a bit stripped down below.  Sample http://jsbin.com/movofinuza/1/ make sure to look at it about ipad size as I only used size "xs" for the width.

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="row">
  <div class="col-xs-6">
    <!-- left side start -->
    
      <!-- box start ************************** -->
 <div class="col-md-2 col-sm-6 col-xs-12">
   <div class="thumbnail" style="clear:left;">
     <a class="imgPop" ><img src="http://ikonltd.com/images/sm/Warhol-Shadow.jpg" border="0" class="img-responsive pull-left"></a> 
     <div class="caption pull-right">
       <b>Andy Warhol<br><i>The Shadow</i></b><br>1981<br>38 x 38 inches<br>Color screenprint with diamond dust on Lenox Museum board<br>Signed in pencil and numbered<br>Edition of 200 (30AP)
       <p>
          <a data-toggle="modal" href="#myModal1536" class="label label-danger" rel="tooltip" title="Zoom">Zoom</a>
          <a href="mailto:ikon@ikonltd.com?Subject=re: Andy Warhol-The Shadow" class="label label-warning" rel="tooltip" title="Contact Gallery">Contact Gallery</a>
       </p>
    </div><!--end caption-->
  </div><!--end thumbnail-->
  </div><!-- box end -->
    
    
      <!-- box start ************************** -->
 <div class="col-md-2 col-sm-6 col-xs-12">
   <div class="thumbnail" style="clear:left;">
     <a class="imgPop" ><img src="http://ikonltd.com/images/sm/Warhol-Shadow.jpg" border="0" class="img-responsive pull-left"></a> 
     <div class="caption pull-right">
       <b>Andy Warhol<br><i>The Shadow</i></b><br>1981<br>38 x 38 inches<br>Color screenprint with board<br>Signed in pencil and numbered<br>Edition of 200 (30AP)
       <p>
          <a data-toggle="modal" href="#myModal1536" class="label label-danger" rel="tooltip" title="Zoom">Zoom</a>
          <a href="mailto:ikon@ikonltd.com?Subject=re: Andy Warhol-The Shadow" class="label label-warning" rel="tooltip" title="Contact Gallery">Contact Gallery</a>
       </p>
    </div><!--end caption-->
  </div><!--end thumbnail-->
  </div><!-- box end -->
    
    
      <!-- box start ************************** -->
 <div class="col-md-2 col-sm-6 col-xs-12">
   <div class="thumbnail" style="clear:left;">
     <a class="imgPop" ><img src="http://ikonltd.com/images/sm/Warhol-Shadow.jpg" border="0" class="img-responsive pull-left"></a> 
     <div class="caption pull-right">
       <b>Andy Warhol<br><i>The Shadow</i></b><br>1981<br>38 x 38 inches<br>Color
       <p>
          <a data-toggle="modal" href="#myModal1536" class="label label-danger" rel="tooltip" title="Zoom">Zoom</a>
          <a href="mailto:ikon@ikonltd.com?Subject=re: Andy Warhol-The Shadow" class="label label-warning" rel="tooltip" title="Contact Gallery">Contact Gallery</a>
       </p>
    </div><!--end caption-->
  </div><!--end thumbnail-->
  </div><!-- box end -->
    
    
       <!-- box start ************************** -->
 <div class="col-md-2 col-sm-6 col-xs-12">
   <div class="thumbnail" style="clear:left;">
     <a class="imgPop" ><img src="http://ikonltd.com/images/sm/Warhol-Shadow.jpg" border="0" class="img-responsive pull-left"></a> 
     <div class="caption pull-right">
       <b>Andy Warhol<br><i>The Shadow</i></b><br>1981<br>38 x 38 inches<br>Color screenprint with diamond dust on Lenox Museum board<br>Signed in pencil and numbered<br>Edition of 200 (30AP)
       Andy Warhol<br><i>The Shadow</i></b><br>1981<br>38 x 38 inches<br>Color screenprint with diamond dust on Lenox Museum board<br>Signed in pencil and numbered<br>Edition of 200 (30AP)Andy Warhol<br><i>The Shadow</i></b><br>1981<br>38 x 38 inches<br>Color screenprint with diamond dust on Lenox Museum board<br>Signed in pencil and numbered<br>Edition of 200 (30AP)
       <p>
          <a data-toggle="modal" href="#myModal1536" class="label label-danger" rel="tooltip" title="Zoom">Zoom</a>
          <a href="mailto:ikon@ikonltd.com?Subject=re: Andy Warhol-The Shadow" class="label label-warning" rel="tooltip" title="Contact Gallery">Contact Gallery</a>
       </p>
    </div><!--end caption-->
  </div><!--end thumbnail-->
  </div><!-- box end --> 
    
         <!-- box start ************************** -->
 <div class="col-md-2 col-sm-6 col-xs-12">
   <div class="thumbnail" style="clear:left;">
     <a class="imgPop" ><img src="http://ikonltd.com/images/sm/Warhol-Shadow.jpg" border="0" class="img-responsive pull-left"></a> 
     <div class="caption pull-right">
       <b>Andy Warhol<br><i>The Shadow</i></b><br>1981<br>38 x 38 inches<br>Color screenprint with diamond dust on Lenox Museum board<br>Signed in pencil and numbered<br>Edition of 200 (30AP)
       <p>
          <a data-toggle="modal" href="#myModal1536" class="label label-danger" rel="tooltip" title="Zoom">Zoom</a>
          <a href="mailto:ikon@ikonltd.com?Subject=re: Andy Warhol-The Shadow" class="label label-warning" rel="tooltip" title="Contact Gallery">Contact Gallery</a>
       </p>
    </div><!--end caption-->
  </div><!--end thumbnail-->
  </div><!-- box end -->
    
    
   
    
      <!-- box start ************************** -->
 <div class="col-md-2 col-sm-6 col-xs-12">
   <div class="thumbnail" style="clear:left;">
     <a class="imgPop" ><img src="http://ikonltd.com/images/sm/Warhol-Shadow.jpg" border="0" class="img-responsive pull-left"></a> 
     <div class="caption pull-right">
       <b>Andy Warhol<br><i>The Shadow</i></b><br>1981<br>38 x 38 inches<br>Color
       <p>
          <a data-toggle="modal" href="#myModal1536" class="label label-danger" rel="tooltip" title="Zoom">Zoom</a>
          <a href="mailto:ikon@ikonltd.com?Subject=re: Andy Warhol-The Shadow" class="label label-warning" rel="tooltip" title="Contact Gallery">Contact Gallery</a>
       </p>
    </div><!--end caption-->
  </div><!--end thumbnail-->
  </div><!-- box end -->
    
    
       <!-- box start ************************** -->
 <div class="col-md-2 col-sm-6 col-xs-12">
   <div class="thumbnail" style="clear:left;">
     <a class="imgPop" ><img src="http://ikonltd.com/images/sm/Warhol-Shadow.jpg" border="0" class="img-responsive pull-left"></a> 
     <div class="caption pull-right">
       <b>Andy Warhol<br><i>The Shadow</i></b><br>1981<br>38 x 38 inches<br>Color screenprint with diamond dust on Lenox Museum board<br>Signed in pencil and numbered<br>Edition of 200 (30AP)
       Andy Warhol<br><i>The Shadow</i></b><br>1981<br>38 x 38 inches<br>Color screenprint with diamond dust on Lenox Museum board<br>Signed in pencil and numbered<br>Edition of 200 (30AP)Andy Warhol<br><i>The Shadow</i></b><br>1981<br>38 x 38 inches<br>Color screenprint with diamond dust on Lenox Museum board<br>Signed in pencil and numbered<br>Edition of 200 (30AP)
       <p>
          <a data-toggle="modal" href="#myModal1536" class="label label-danger" rel="tooltip" title="Zoom">Zoom</a>
          <a href="mailto:ikon@ikonltd.com?Subject=re: Andy Warhol-The Shadow" class="label label-warning" rel="tooltip" title="Contact Gallery">Contact Gallery</a>
       </p>
    </div><!--end caption-->
  </div><!--end thumbnail-->
  </div><!-- box end --> 
    
    
    
     <!-- ***************************** left side end -------------------------->
  </div> 
  <div class="col-xs-6">
    <!-- right side start -->
    
         <!-- box start ************************** -->
 <div class="col-md-2 col-sm-6 col-xs-12">
   <div class="thumbnail" style="clear:left;">
     <a class="imgPop" ><img src="http://ikonltd.com/images/sm/Warhol-Shadow.jpg" border="0" class="img-responsive pull-left"></a> 
     <div class="caption pull-right">
       <b>Andy Warhol<br><i>The Shadow</i></b><br>1981<br>38 x 38 inches<br>Colo(30AP)
       <p>
          <a data-toggle="modal" href="#myModal1536" class="label label-danger" rel="tooltip" title="Zoom">Zoom</a>
          <a href="mailto:ikon@ikonltd.com?Subject=re: Andy Warhol-The Shadow" class="label label-warning" rel="tooltip" title="Contact Gallery">Contact Gallery</a>
       </p>
    </div><!--end caption-->
  </div><!--end thumbnail-->
  </div><!-- box end -->
    
    
      <!-- box start ************************** -->
 <div class="col-md-2 col-sm-6 col-xs-12">
   <div class="thumbnail" style="clear:left;">
     <a class="imgPop" ><img src="http://ikonltd.com/images/sm/Warhol-Shadow.jpg" border="0" class="img-responsive pull-left"></a> 
     <div class="caption pull-right">
       <b>Andy Warhol<br><i>The Shadow</i></b><br>1981<br>38 x 38 inches<br>Color screenprint with board<br>Signed in pencil and numbered<br>Edition of 200 (30AP) x 38 inches<br>Color screenprint with board<br>Signed in pencil and numbered<br>Edition of 200 (30AP) x 38 inches<br>Color screenprint with board<br>Signed in pencil and numbered<br>Edition of 200 (30AP)
       <p>
          <a data-toggle="modal" href="#myModal1536" class="label label-danger" rel="tooltip" title="Zoom">Zoom</a>
          <a href="mailto:ikon@ikonltd.com?Subject=re: Andy Warhol-The Shadow" class="label label-warning" rel="tooltip" title="Contact Gallery">Contact Gallery</a>
       </p>
    </div><!--end caption-->
  </div><!--end thumbnail-->
  </div><!-- box end -->
    
    
      <!-- box start ************************** -->
 <div class="col-md-2 col-sm-6 col-xs-12">
   <div class="thumbnail" style="clear:left;">
     <a class="imgPop" ><img src="http://ikonltd.com/images/sm/Warhol-Shadow.jpg" border="0" class="img-responsive pull-left"></a> 
     <div class="caption pull-right">
       <b>Andy Warhol<br><i>The Shadow</i></b><br>1981<br>38 x 38 inches<br>Color
       <p>
          <a data-toggle="modal" href="#myModal1536" class="label label-danger" rel="tooltip" title="Zoom">Zoom</a>
          <a href="mailto:ikon@ikonltd.com?Subject=re: Andy Warhol-The Shadow" class="label label-warning" rel="tooltip" title="Contact Gallery">Contact Gallery</a>
       </p>
    </div><!--end caption-->
  </div><!--end thumbnail-->
  </div><!-- box end -->
    
    
       <!-- box start ************************** -->
 <div class="col-md-2 col-sm-6 col-xs-12">
   <div class="thumbnail" style="clear:left;">
     <a class="imgPop" ><img src="http://ikonltd.com/images/sm/Warhol-Shadow.jpg" border="0" class="img-responsive pull-left"></a> 
     <div class="caption pull-right">
       <b>Andy Warhol<br><i>The Shadow</i></b><br>1981<br>38 x 38 inches<br>Color screenprint with diamond dust on Lenox Museum board<br>Signed in pencil and numbered<br>Edition of 200 (30AP)
       Andy Warhol<br><i>The Shadow</i></b><br>1981<br>38 x 38 inches<br>Color screenprint with diamond dust on Lenox Museum board<br>Signed in pencil and numbered<br>Edition of 200 (30AP)Andy Warhol<br><i>The Shadow</i></b><br>1981<br>38 x 38 inches<br>Color screenprint with diamond dust on Lenox Museum board<br>Signed in pencil and numbered<br>Edition of 200 (30AP)
       <p>
          <a data-toggle="modal" href="#myModal1536" class="label label-danger" rel="tooltip" title="Zoom">Zoom</a>
          <a href="mailto:ikon@ikonltd.com?Subject=re: Andy Warhol-The Shadow" class="label label-warning" rel="tooltip" title="Contact Gallery">Contact Gallery</a>
       </p>
    </div><!--end caption-->
  </div><!--end thumbnail-->
  </div><!-- box end --> 

     <!-- box start ************************** -->
 <div class="col-md-2 col-sm-6 col-xs-12">
   <div class="thumbnail" style="clear:left;">
     <a class="imgPop" ><img src="http://ikonltd.com/images/sm/Warhol-Shadow.jpg" border="0" class="img-responsive pull-left"></a> 
     <div class="caption pull-right">
       <b>Andy Warhol<br><i>The Shadow</i></b><br>1981<br>38 x 38 inches<br>Color screenprint with diamond dust on Lenox Museum board<br>Signed in pencil and numbered<br>Edition of 200 (30AP)
       <p>
          <a data-toggle="modal" href="#myModal1536" class="label label-danger" rel="tooltip" title="Zoom">Zoom</a>
          <a href="mailto:ikon@ikonltd.com?Subject=re: Andy Warhol-The Shadow" class="label label-warning" rel="tooltip" title="Contact Gallery">Contact Gallery</a>
       </p>
    </div><!--end caption-->
  </div><!--end thumbnail-->
  </div><!-- box end -->
    
    
      <!-- box start ************************** -->
 <div class="col-md-2 col-sm-6 col-xs-12">
   <div class="thumbnail" style="clear:left;">
     <a class="imgPop" ><img src="http://ikonltd.com/images/sm/Warhol-Shadow.jpg" border="0" class="img-responsive pull-left"></a> 
     <div class="caption pull-right">
       <b>Andy Warhol<br><i>The Shadow</i></b><br>1981<br>38 x 38 inches<br>Color screenprint with board<br>Signed in pencil and numbered<br>Edition of 200 (30AP)
       <p>
          <a data-toggle="modal" href="#myModal1536" class="label label-danger" rel="tooltip" title="Zoom">Zoom</a>
          <a href="mailto:ikon@ikonltd.com?Subject=re: Andy Warhol-The Shadow" class="label label-warning" rel="tooltip" title="Contact Gallery">Contact Gallery</a>
       </p>
    </div><!--end caption-->
  </div><!--end thumbnail-->
  </div><!-- box end -->

    
       <!-- box start ************************** -->
 <div class="col-md-2 col-sm-6 col-xs-12">
   <div class="thumbnail" style="clear:left;">
     <a class="imgPop" ><img src="http://ikonltd.com/images/sm/Warhol-Shadow.jpg" border="0" class="img-responsive pull-left"></a> 
     <div class="caption pull-right">
       <b>Andy Warhol<br><i>The Shadow</i></b><br>1981<br>38 x 38 inches<br>Color screenprint with diamond dust on Lenox Museum board<br>Signed in pencil and numbered<br>Edition of 200 (30AP)
       Andy Warhol<br><i>The Shadow</i></b><br>1981<br>38 x 38 inches<br>Color screenprint with diamond dust on Lenox Museum board<br>Signed in pencil and numbered<br>Edition of 200 (30AP)Andy Warhol<br><i>The Shadow</i></b><br>1981<br>38 x 38 inches<br>Color screenprint with diamond dust on Lenox Museum board<br>Signed in pencil and numbered<br>Edition of 200 (30AP)
       <p>
          <a data-toggle="modal" href="#myModal1536" class="label label-danger" rel="tooltip" title="Zoom">Zoom</a>
          <a href="mailto:ikon@ikonltd.com?Subject=re: Andy Warhol-The Shadow" class="label label-warning" rel="tooltip" title="Contact Gallery">Contact Gallery</a>
       </p>
    </div><!--end caption-->
  </div><!--end thumbnail-->
  </div><!-- box end --> 
    
    
    
    
    
    
     <!-- right side end -->
  </div> 
  

  

 </div>
</body>
</html>

Select allOpen in new window

There are other fundamental items like not using inline styles.  You also only need one div for the modal and one piece of javascript.  No need to load modal js for every "box".But those items you can tackle in another question.  I hope this makes sense.  If you just use .row with a containing .col-xx-xx and inside of that another row and column it will work as expected.

Scott Fell   - I can't divide my thumbs up into two columns (left side, right side)  - they are being outputted dynamically. Thanks for the tip with the modal though-I'll mess with that.

Kyle Hamilton - I got your logic to work -but it's not working on ipad/safari. I'm going to keep messing with it.

Thanks so much for your help everyone. I opted to Go with Kyle's fix:

min-width : 768px:

.images > div:nth-child(odd){clear:left;}

min-width:992px:

.images > div:nth-child(6n+1){clear:left;}
.images > div:nth-child(odd){clear:none;}

I applied the image class to my row:

<div class="row images">

 <CFOUTPUT QUERY="newaqimages" startrow="#StartRow_newaqimages#" maxrows="#MaxRows_newaqimages#">
   <div class="col-md-2 col-sm-6 col-xs-12">
   <div class="thumbnail">

@phillystyle123


not sure why you didn't use max-width like I suggested. You wouldn't have had to do any of that reseting at 6n+1

?