Thursday, 22 August 2013

Horizontal Thumbnails in Bootstrap 3

Horizontal Thumbnails in Bootstrap 3

I'm trying to have 3 thumbnails horizontally beside one another and
centred. The issue with these is that they are not centred. I'm also
wondering whether I could simplify the code since for example <div
class="column"> is repetitive in all 3 parts. However, when I try to do
that, the pictures stack vertically instead of horizontally and I'm not
sure why. So my questions are:
How do I centre the 3 pictures on the page?
How do I simplify the code without the images becoming vertically stacked?
Current code
<div class="column">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img
src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg"
alt="My Image" />
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lalalala</p>
</div>
</div>
</div>
</div>
<div class="column">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img
src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg"
alt="My Image" />
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lalalala</p>
</div>
</div>
</div>
</div>
<div class="column">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img
src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg"
alt="My Image" />
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lalalala</p>
</div>
</div>
</div>
</div>

No comments:

Post a Comment