i'm trying have 3 thumbnails horizontally beside 1 , centred. issue these not centred. i'm wondering whether simplify code since example <div class="column"> repetitive in 3 parts. however, when try that, pictures stack vertically instead of horizontally , i'm not sure why. questions are:
- how centre 3 pictures on page?
- how simplify code without 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 sure if understood question correctly gave shot anyway. wanted?
i removed <div class="column"> , replaced single <div class="row">
i set col size col-xs-4 each thumbnail.
have @ link example using code: http://jsfiddle.net/p9k3x/
