CODEWITHSUNDEEP
centertwitter-bootstrap-3
Kotise
Kotise

Reputation: 1

Twitter-bootstrap-3 | Thumbnail Centering?

Hey Guys!

I'm currently working on a website using twitter bootstrap 3 but I've got some issues. I'm trying to center the 3 thumbnails I've got. The text is centered, image is centered but I can't seem to get the thumbnails centered. Here is my code:

       <div class="row">
     <div class="col-sm-6 col-md-3">
       <div class="thumbnail">    
  <img src="img/test.png">
        <div class="caption">
    <p>test</p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
 <img src="img/test.png">
        <div class="caption">
          <p>test</p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
  <img src="img/test.png>
        <div class="caption">
          <p>test</p>
        </div>
      </div>
    </div>

CSS:

    .thumbnail {
    background-color: #cecece;
    border: 1px solid #666;
    text-align:center;
}

Upvotes: 0

Views: 3669

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49054

  1. to center your content on the page, wrap the row in a containter ()

  2. Notice that Bootstrap uses a 12 column grid. To fill your row with tree thumbs for the medium (md) grid, consider to use the col-md-4 class (3 x 4 = 12) class for your columns. ON the small (sm) grid you now have 3 columns of 50% by using three times the col-sm-6 class. Consider to use only one class, only the col-md-4 class will give you 3 columns for a screen width of 992px or wider and only the col-sm-4 class does the same but for screen widths of 768px and wider. Below the 992 or 768 the columns will stack.

  3. The text can be centered by applying the text-center class, also see http://getbootstrap.com/css/#type-alignment

Also see: http://www.bootply.com/WAFUzlJs8s

Upvotes: 2

Related Questions