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

Popular posts from this blog

javascript - how to protect a flash video from refresh? -

android - Associate same looper with different threads -

visual studio 2010 - Connect to informix database windows form application -