html - Twitter Bootstrap with tiles centered -
i creating app using bootstrap house tile style. new web designing , bit struggling these tiles arranged. requirement is, place 4 tiles inside carousel such each slide should contain 4 tiles.
i tried using col-cm-6 divide container equally. tile stays left aligned.
<div class="container"> <div class="row"> <h1>sample tiles using bootstrap classes</h1> <div class="row"> <div class="col-sm-6"> <a href="#" title="image 1"> <img src="//placehold.it/250x250" class="thumbnail img-responsive danger" /></a> </div> <div class="col-sm-6 "> <a href="#" title="image 1"> <img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a> </div> <div class="col-sm-6 "> <a href="#" title="image 1"> <img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a> </div> <div class="col-sm-6 "> <a href="#" title="image 1"> <img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a> </div> </div> </div> </div>
could please tell me missing.
regards, raaj
usetext-center
demo: demo full screen
<div class="container text-center"> <h1>sample tiles using bootstrap classes</h1> <div class="row"> <div class="col-sm-6"> <a href="#" title="image 1"> <img src="//placehold.it/250x250" class="thumbnail img-responsive danger" /></a> </div> <div class="col-sm-6 "> <a href="#" title="image 1"> <img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a> </div> <div class="col-sm-6 "> <a href="#" title="image 1"> <img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a> </div> <div class="col-sm-6 "> <a href="#" title="image 1"> <img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a> </div> </div> </div>
css:
.thumbnail { margin: 0 auto; }
Comments
Post a Comment