Bootstrap 3: How to keep thumbnails or images aligned within a row?

debugcn Published at Dev

whoisjuan

I'm trying to make this grid work but I'm not sure what's the best approach here. I have this page with several thumbnails and each thumbnail has a title. The problem is that when the title length is very long it pushes the thumbnail and everything get messy like this:

enter image description here

I would like to find a way to keep thumbnails aligned, so if there is a very long title instead of pushing that thumbnail down, it pushes the whole row.

This is the markup I have so far for this block of thumbnails:

<div class="container">
   <div class="content row">
          <div class="col-lg-12">
                <h1>Fresh Goals and More</h1>
                <hr>
          </div>
                <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                  <h2>Test Title<h2>
                    <a class="thumbnail" href="#">
                      <div class="vignette">
                        <img class="img-responsive" src="img/placeholder.jpg">
                      </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                  <h2>Test Title That is Very Long So I Can Test How does Long Titles Behave in My web site display<h2>
                    <a class="thumbnail" href="#">
                      <div class="vignette">
                        <img class="img-responsive" src="img/placeholder.jpg">
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                  <h2>Test Title<h2>
                    <a class="thumbnail" href="#">
                      <div class="vignette">
                        <img class="img-responsive" src="img/placeholder.jpg">
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                  <h2>Test Title<h2>
                    <a class="thumbnail" href="#">
                      <div class="vignette">
                        <img class="img-responsive" src="img/placeholder.jpg">
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                  <h2>Test Title<h2>
                    <a class="thumbnail" href="#">
                      <div class="vignette">
                        <img class="img-responsive" src="img/placeholder.jpg">
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                  <h2>Test Title<h2>
                    <a class="thumbnail" href="#">
                      <div class="vignette">
                        <img class="img-responsive" src="img/placeholder.jpg">
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                  <h2>Test Title<h2>
                    <a class="thumbnail" href="#">
                      <div class="vignette">
                        <img class="img-responsive" src="img/placeholder.jpg">
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                  <h2>Test Title<h2>
                    <a class="thumbnail" href="#">
                      <div class="vignette">
                        <img class="img-responsive" src="img/placeholder.jpg">
                        </div>
                    </a>
                </div>
  </div><!-- content row close -->
 </div><!-- container close -->

Any hint on how can I fix this? Thanks in advance.

nolawi

this is simple you have to have a row for four thumbs

<div class="row">
<div class="col-md-3">thumb</div><div class="col-md-3">thumb</div><div class="col-md-3">thumb</div>
</div>
<div class="row">
<div class="col-md-3">thumb</div><div class="col-md-3">thumb</div><div class="col-md-3">thumb</div>
</div>

the row will keep the height of the longest column with children thumb http://www.bootply.com/6C7i5iRZhz

Collected from the Internet

Please contact [email protected] to delete if infringement.