bootstrap 3 - clearfix not working

When viewing this page

http://ikonltd.com/current/index-bootstrap.cfm

on iPad (landscape) I'm trying for a 2 column layout. Notice that there is a float issue with a few of the thumbnails because some have more text than others. I assumed this is what clearfix was for -so I can maintain the 2 column layout. I'm currently adding it to the thumbnail div: <div class="thumbnail clearfix"> and have attempted to add it to the col div: <div class="col-md-2 col-sm-6 col-xs-12 thumbnail"> -neither is effecting the layout.

Here is the code for one of my thumbnails:

<div class="col-md-2 col-sm-6 col-xs-12">
   <div class="thumbnail clearfix">
 <a class="imgPop" href="/current/medium/1540/6/" onmouseover="showtext('<b>Jean Dubuffet<br><i>Site Avec Sept Personnages</i></b><br>1981<br>26 x 20 inches<br>Signed “J.D. 81”, lower right front<br>Acrylic on paper mounted on canvas')" onmouseout="hidetext()"><img src="http://ikonltd.com/images/sm/dubuffet_-Site-Avec-Sept-Personnages.jpg" class="img-responsive pull-left" border="0"></a> <div class="caption pull-right">
<b>Jean Dubuffet<br><i>Site Avec Sept Personnages</i></b><br>1981<br>26 x 20 inches<br>Signed “J.D. 81”, lower right front<br>Acrylic on paper mounted on canvas<p>
                      <a data-toggle="modal" href="#myModal1540" class="label label-danger" rel="tooltip" title="Zoom">Zoom</a>
                    <a href="mailto:ikon@ikonltd.com?Subject=re: Jean Dubuffet-Site Avec Sept Personnages" class="label label-warning" rel="tooltip" title="Contact Gallery">Contact Gallery</a></p><!--modal html-->
<div class="modal" id="myModal1540">
	<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">Jean Dubuffet:</span> <span class="modalTitle">Site Avec Sept Personnages</span></h4>
          <p><br>1981<br>26 x 20 inches<br>Signed “J.D. 81”, lower right front<br>Acrylic on paper mounted on canvas</p><p><a href="mailto:ikon@ikonltd.com?Subject=re: Jean Dubuffet-Site Avec Sept Personnages" 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/dubuffet_-Site-Avec-Sept-Personnages.jpg" class="img-responsive" border="0"> </div>
              </div>
    </div>
</div>
<!--/modal html-->
<!--modal-->
<script>
$('#openBtn').click(function(){
	$('#myModal1540').modal({show:true})
});
</script>
<!--/modal-->
</div>
 </div><!--end thumbnail-->
  
   </div><!--end thumb col-->

Open in new window

phillystyle123Asked:
Who is Participating?
 
Kyle HamiltonData ScientistCommented:
applying the clearfix to the indivdual items is not how you would use clearfix. clearfix is applied to the container.

what you have right now are a bunch of items floated left -no rows. they are behaving exactly as one would expect. if you want them to 'appear' as if they are in rows, you might try Kravimir's suggestion.

if you really dont want to let go of the BS classes, then you would need to give each thumb a fixed height.

or, forget the bs classes, float all the thumbnails left. then add nth child clera left rules inside your media queries.

for example:

above 1024px,
thum:nth-child(4n+1){clear:left}
above 768,
thum:nth-child(4n+1){clear:none}
thum:nth-child(3n+1){clear:left}

etc...

i might have gotten the order of operations wrong here, but you get the idea
0
 
David S.Commented:
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/
0
 
Kyle HamiltonData ScientistCommented:
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: " ";
}

Open 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/
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Kyle HamiltonData ScientistCommented:
@Kravimir, oops, you beat me to it :)
0
 
phillystyle123Author Commented:
@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-->

Open in new window

0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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>

Open 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.
0
 
Kyle HamiltonData ScientistCommented:
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
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
0
 
phillystyle123Author Commented:
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:

ipad landscape 2 column grid
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-->

Open in new window

0
 
Kyle HamiltonData ScientistCommented:
that's a screen grab of the existing layout. please post a picture of what you are looking for.
0
 
David S.Commented:
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.
0
 
Kyle HamiltonData ScientistCommented:
give your container row another class, like "images", then add this to your stylesheet:


  .images > div:nth-child(odd){clear:left}
 
this will work for a two column layout. if you want it to be responsive, with different numbers of columns in different viewport sizes, then you can do what I suggested above.
0
 
Kyle HamiltonData ScientistCommented:
... just make sure you put it in the media query where you display 2 columns.
0
 
Kyle HamiltonData ScientistCommented:
@media (max-width: 768px){
  .images > div:nth-child(odd){clear:left}
}

Open in new window

0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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 -->

Open 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>

Open 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.
0
 
Kyle HamiltonData ScientistCommented:
there is always, like, 20 different solutions to any question. @Scott, one could argue that doing it the BS way you end up with all kinds of nested HTML bloat. But then again, maybe it doesn't matter.

I like my nth-child solution because it's a single line of CSS, but whatever...

@phillystyle123

I can see you are trying all different things as we speak. make sure to use max-width. see comment above.
0
 
phillystyle123Author Commented:
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.
0
 
phillystyle123Author Commented:
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">
0
 
Kyle HamiltonData ScientistCommented:
@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

?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.