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

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

i'm trying create grid work i'm not sure what's best approach here. have page several thumbnails , each thumbnail has title. problem when title length long pushes thumbnail , messy this:

i find way maintain thumbnails aligned, if there long title instead of pushing thumbnail down, pushes whole row.

this markup have far block of thumbnails:

<div class="container"> <div class="content row"> <div class="col-lg-12"> <h1>fresh goals , 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 long can test how long titles behave in 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 prepare this? in advance.

this simple have have row 4 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 maintain height of longest column children thumb http://www.bootply.com/6c7i5irzhz

html5 css3 twitter-bootstrap-3 alignment