CODEWITHSUNDEEP
csstwitter-bootstrap
Bill Teale
Bill Teale

Reputation: 169

nth-child in Bootstrap3 not aligning properly

I can't ever seem to get this to work, I have a simple bootstrap page with an image gallery that has images of different heights. I am trying to use the nth-child to clear the left side after every fourth .col-md-3

Bootply smippet - http://www.bootply.com/7BhYr6J8rH

The content of the finished page is going to be dynamically populated from a database, so I need this flexibility to work. Can anybody point out where I'm going wrong?

Upvotes: 0

Views: 31

Answers (1)

Luuk Skeur
Luuk Skeur

Reputation: 1940

Hard to explain but you are using nth-child on the image. Because there is no image list it will never reach a 4th image, each column has 1 image and no more. However, a row does contain a list of columns so I edited your code to clear by column like so http://www.bootply.com/7BhYr6J8rH:

.row .col-md-3:nth-child(5n) {
   clear:left;
}

Another idea, what you could do is add <div class="clearfix"></div> after each fourth column for the same result and cleaner code.

Upvotes: 1

Related Questions