CODEWITHSUNDEEP
htmlcsswordpresstwitter-bootstrap
AlexR
AlexR

Reputation: 5634

Horizontally align thumbnails

Based on this sample code snippet from the Bootstrap website I have built the following code to show two thumbnails horizontally aligned:

<div class="row">
  <div class="col-sm-6 col-md-3 col-lg-3">
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Filter mode</p>
        <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p>
      </div>
    </div>
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Filter mode</p>
        <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p>
      </div>
    </div>
  </div>
</div>

However, instead of aligning them horizontally, they are stacked vertically, like so:

enter image description here

How can I have the thumbnails horizontally aligned as shown in the code sample here?

Upvotes: 0

Views: 3168

Answers (5)

lee_gladding
lee_gladding

Reputation: 1100

Or you can use inline-block for the thumbnail display property, this will avoid potential clearing issues in your document flow when using floats:

.thumbnail {
    display: inline-block;
}

The example used in twitter bootstrap is using columns, so placing more than one thumb into one column will cause them to stack. Try adding into different columns to get the same effect as the example like so:

<div class="col-sm-6 col-md-3 col-lg-3">
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Filter mode</p>
        <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p>
      </div>
    </div>
</div>
<div class="col-sm-6 col-md-3 col-lg-3">
   <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Filter mode</p>
        <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p>
      </div>
   </div>
</div>

Doing this you don't need to use any custom styles, it is intended bootstrap behaviour.

Upvotes: 1

Dragos Sandu
Dragos Sandu

Reputation: 664

Your problem is in col-sm-6, col-md-3, col-lg-3 classes. Try to remove <div class="col-sm-6, col-md-3, col-lg-3">. It should work.

POST EDIT: I forgot about .thumbnail: { display:inline; ...}

Upvotes: 1

Anon
Anon

Reputation: 2874

.row{text-align: center;}
.thumbnail{
    display: inline-block;
    text-align: left;
}

Upvotes: 1

Nikk
Nikk

Reputation: 7891

Be sure to float the <div>'s like so jsFiddle. Using float: left;, clear: none;, position: relative;.

Upvotes: 0

Xareyo
Xareyo

Reputation: 1377

All you need to do is add this in your CSS:

.thumbnail {
    float: left;
}

Upvotes: 1

Related Questions