html - Horizontally align thumbnails -
based on sample code snippet bootstrap website have built following code show 2 thumbnails horizontally aligned:
<div class="row"> <div class="col-sm-6 col-md-3 col-lg-3"> <div class="thumbnail"> <img data-src="holder.js/300x200" alt="..."> <div class="caption"> <h3>thumbnail label</h3> <p>filter mode</p> <p><a href="#" class="btn btn-primary">button</a> <a href="#" class="btn btn-default">button</a></p> </div> </div> <div class="thumbnail"> <img data-src="holder.js/300x200" alt="..."> <div class="caption"> <h3>thumbnail label</h3> <p>filter mode</p> <p><a href="#" class="btn btn-primary">button</a> <a href="#" class="btn btn-default">button</a></p> </div> </div> </div> </div>
however, instead of aligning them horizontally, stacked vertically, so:
how can have thumbnails horizontally aligned shown in code sample here?
your problem in col-sm-6, col-md-3, col-lg-3
classes. try remove <div class="col-sm-6, col-md-3, col-lg-3">
. should work.
post edit: forgot .thumbnail: { display:inline; ...}
Comments
Post a Comment