CODEWITHSUNDEEP
htmlcssruby-on-railstwitter-bootstrap-3
megashigger
megashigger

Reputation: 9053

Horizontal align thumbnails to center in Bootstrap 3

I'm trying to have 3 thumbnails horizontally beside one another and centred. The issue with these is that they are not centred. I'm also wondering whether I could simplify the code since for example <div class="column"> is repetitive in all 3 parts. However, when I try to do that, the pictures stack vertically instead of horizontally and I'm not sure why. So my questions are:

  1. How do I centre the 3 pictures on the page?
  2. How do I simplify the code without the images becoming vertically stacked?

Current code

<div class="column">
  <div class="col-sm-6 col-md-3">
    <div class="thumbnail">
      <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" />
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Lalalala</p>
      </div>
    </div>
  </div>
</div>

<div class="column">
  <div class="col-sm-6 col-md-3">
    <div class="thumbnail">
      <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" />
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Lalalala</p>
      </div>
    </div>
  </div>
</div>

<div class="column">
  <div class="col-sm-6 col-md-3">
    <div class="thumbnail">
      <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" />
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Lalalala</p>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Views: 17555

Answers (2)

theRyanMark
theRyanMark

Reputation: 710

If I understand what you are asking correctly you need to:

  1. Add a <div class="container"> and <div class="row"> tags to your code.
  2. Remove the <div class="column"> tags
  3. Change your <div class="col-sm-6 col-md-3"> to <div class="col-xs-4>

The container class centers the elements inside that div on the page. You want all of your col-xx-## classes nested inside of a <div class="row">. Also, Bootstrap 3 is "Mobile First" so anything done in the col-xs-## class groupings will be inherited by the larger screen resolutions. The reason for using col-xs-4 class is because you want 3 total columns, so you want to take up 4 of the 12 column spaces. It is a little counter intuitive. Here is some Bootstrap 3 documentation on the grid system.

I hope this answers your question! Happy coding.

Once you make those changes your code should look like this:

 <div class="container">
    <div class="row">
      <div class="col-xs-4">
        <div class="thumbnail">
          <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" />
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Lalalala</p>
          </div>
        </div>
      </div>

      <div class="col-xs-4">
        <div class="thumbnail">
          <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" />
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Lalalala</p>
          </div>
        </div>
      </div>

      <div class="col-xs-4">
        <div class="thumbnail">
          <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" />
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Lalalala</p>
          </div>
        </div>
      </div>
    </div><!-- End Row Div --> 


</div><!-- End Container Div -->

Upvotes: 0

kurupt_89
kurupt_89

Reputation: 1592

No sure if I understood your question correctly but gave it a shot anyway. Is this what you wanted?

I removed all <div class="column"> and replaced with single <div class="row">

I also set col size to col-xs-4 for each thumbnail.

Have a look at this link for an example using your code: http://jsfiddle.net/p9k3x/

Upvotes: 3

Related Questions