Twitter Bootstrap thumbnails not lining up (and solution)

Twitter Bootstrap sure makes coding a site a lot easier. I needed to add a bunch of thumbnails (list of thumbnails) and Twitter Bootstrap has the code to make this simple. The problem is when the list wrapped to the second line, it did not line up. Here is the code I found to fix this issue:

[cc lang=”css”]
/* fluid thumbnail fix – https://github.com/twitter/bootstrap/issues/3494 */
.row-fluid ul.thumbnails li.span12 + li { margin-left : 0px;clear:left }
.row-fluid ul.thumbnails li.span6:nth-child(2n + 3) { margin-left : 0px;clear:left }
.row-fluid ul.thumbnails li.span4:nth-child(3n + 4) { margin-left : 0px;clear:left }
.row-fluid ul.thumbnails li.span3:nth-child(4n + 5) { margin-left : 0px; clear:left}
.row-fluid ul.thumbnails li.span2:nth-child(6n + 7) { margin-left : 0px;clear:left }
.row-fluid ul.thumbnails li.span1:nth-child(12n + 13) { margin-left : 0px;clear:left }
[/cc]

Leave a Reply

Your email address will not be published. Required fields are marked *