Twitter Bootstrap avec des carreaux centrés

Question

Je crée une application en utilisant bootstrap qui abrite des carreaux comme le style. Je suis nouveau à cette conception de Web et j'ai lutté peu pour obtenir ces tuiles arrangées. Mon exigence est, je voudrais placer 4 tuiles à l'intérieur d'un carrousel de sorte que chaque diapositive devrait contenir 4 tuiles.

J'ai essayé d'utiliser col-cm-6 pour diviser le récipient également. Mais la tuile reste alignée à gauche.

<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> 

Quelqu'un peut-il s'il vous plaît dites-moi ce que je manque.

Cordialement, Raaj

Answer 1

Utilisez text-center

DEMO: Démo 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; 
}