I find a tutorial about bootstrap grid, but it was written in bootstrap1.x. Now I want to use bootstrap3 to achieve the same effect. The doc says using .img-thumbnail instead of .media-grid, but it seems still not work. What I want is something like this:
The 1.x version is:
<ul class="media-grid">
<li>
<a href="#">
<img src="http://placehold.it/290x200" />
</a>
</li>
<li>
<a href="#">
<img src="http://placehold.it/290x200" />
</a>
</li>
<li>
<a href="#">
<img src="http://placehold.it/290x200" />
</a>
</li>
<!-- row of 4 thumbnails -->
<li>
<a href="#">
<img src="http://placehold.it/210x140" />
</a>
</li>
<li>
<a href="#">
<img src="http://placehold.it/210x140" />
</a>
</li>
<li>
<a href="#">
<img src="http://placehold.it/210x140" />
</a>
</li>
<li>
<a href="#">
<img src="http://placehold.it/210x140" />
</a>
</li>
</ul><!-- end media-grid -->
The .img-thumbnail
class is applied to images so they get that rounded border style, it's not a direct replacement for .media-grid
, also if you want the images to be wrapped in a link then you're better off using the .thumbnail
class on the link itself as described here.
To build the actual grid you need to use Bootstrap 3's new grid system, your example would look like this:
<div class="container">
<div class="row">
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
</div>
</div>
Here's a demo fiddle
And here's another fiddle if you don't need the links, just the thumbnail grid
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With