Thumbnails using twitter bootstrap not vertically aligned

Question

Here's my sample output:

enter image description here

Here's my html code on it:

<div class="products">
<ul class="thumbnails">'
    <li>
        <div>'.$item->ASIN.'</div>
        <div><img src="'.$item->SmallImage->URL.'" alt=""></div>
        <div>'.$item->ItemAttributes->Title.'</div>
        <div>'.$item->ItemAttributes->ProductGroup.'</div>
    </li>
</ul>

And here's my css code:

    .thumbnails {
    text-align: center;
}
.thumbnails li {
    width: 150px;
    height: 250px;
    background: red;
    float: none !important; /* to overwrite the default property on the bootstrap stylesheet */
    display: inline-block;
    *display: inline; /* ie7 support */
    zoom: 1;
}

I noticed it is already horizontally aligned, my problem is to align it vertically. What should I do? Please help thanks!

score 1 · Answer 1 · answered Apr 07 '14 at 06:58

I know its a little late but not sure if this helps - http://getbootstrap.com/css/#grid-responsive-resets

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

Thanks,

Ash.

score 0 · Answer 2 · answered Feb 20 '13 at 17:40

Wrap it with a row or container.

<div class="products">
  <div class="container">
    <ul class="thumbnails">'
      <li>
        <div>'.$item->ASIN.'</div>
        <div><img src="'.$item->SmallImage->URL.'" alt=""></div>
        <div>'.$item->ItemAttributes->Title.'</div>
        <div>'.$item->ItemAttributes->ProductGroup.'</div>
      </li>
    </ul>
  </div>
</div>

score 0 · Answer 3 · edited May 23 '17 at 10:32

There are two ways to make this better that I've found: manually setting the element height / keeping the element heights consistent, OR the following CSS:

  .thumbnails > li {
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .thumbnails > li:nth-child(3n+4) {
    clear: both;
  }

Wrapping this in a container won't fix the problem; it'll just constrain it to a smaller space.

Similar issues:

vertically aligning thumbnails in bootstrap css?

Aligning thumbnails along columns using twitter-bootstrap

twitter bootstrap thumbnails not aligning properly anywhere but Chrome + Windows XP

Thumbnails using twitter bootstrap not vertically aligned

3 Answers3