How do I evenly align my content across 3 columns in bootstrap?

Question

As you can see in this image below, my content is not evenly aligned. Is there a way to evenly align my content in Bootstrap? For example, I wish for my images to all be aligned across each column. I dont mind if there is some white space between the paragraph and image.

Answer 1

Using the framework's .thumbnail component (with .caption) you can accomplish @Johannes suggestion like below, including adding your own height to the .caption like below. Make sure you adjust your height as required.

.caption{
  min-height: 300px;
  height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="row">
  <div class="col-xs-4">
    <div class="thumbnail">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo sapien vitae turpis pellentesque tempus. Nunc vehicula cursus ultricies. Sed aliquam hendrerit sapien quis blandit. Nam tempus condimentum nunc ac.</p>
      </div>
      <img src="http://lorempixel.com/300/300" alt="placeholder image">
    </div>
  </div>
  <!-- 2 -->
  <div class="col-xs-4">
    <div class="thumbnail">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget tincidunt justo. Morbi ligula felis, accumsan eu auctor a, vulputate vel justo. Integer sapien nulla, rutrum at metus quis, rutrum porta risus. Vestibulum pulvinar metus nec luctus
          euismod. Vivamus faucibus libero non magna vulputate laoreet.</p>
      </div>
      <img src="http://lorempixel.com/300/300" alt="placeholder image">
    </div>
  </div>
  <!-- 3 -->
 <div class="col-xs-4">
    <div class="thumbnail">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec dui tellus. In imperdiet erat eros, sit amet scelerisque ante efficitur bibendum. Quisque tempor diam.</p>
      </div>
      <img src="http://lorempixel.com/300/300" alt="placeholder image">
    </div>
  </div>
</div>

Answer 2

Okay, this is a problem I came across early on when working with float-based grid systems.

Here's a sketch of how you might solve the problem with your current grid system in Bootstrap: http://jsbin.com/yolewusuza/

@media screen and (min-width: 992px) {
  .content {
    position: absolute;
    top: 0;
    left: 15px;
    right: 15px;
    bottom: 0;
  }
  .col-sm-4:after {
    padding-bottom: 170%;
    content: '';
    display: block;
  }
  .content .image {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <div class="content">
        <h3>Heading</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Videsne quam sit magna dissensio? Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Quamvis enim depravatae non sint, pravae tamen esse possunt. Negat enim summo bono afferre
          incrementum diem. Laboro autem non sine causa; Minime vero istorum quidem, inquit. Duo Reges: constructio interrete.</p>
        <div class="image">
          <img style="width:100%;" src="https://placeholdit.imgix.net/~text?w=350&amp;h=150">
          <p>Image description text</p>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="content">
        <h3>Heading</h3>
        <p>Animi enim quoque dolores percipiet omnibus partibus maiores quam corporis. Non quaeritur autem quid naturae tuae consentaneum sit, sed quid disciplinae. Ut in geometria, prima si dederis, danda sunt omnia. Potius inflammat, ut coercendi magis
          quam dedocendi esse videantur. Ut proverbia non nulla veriora sint quam vestra dogmata. Omnes enim iucundum motum, quo sensus hilaretur. At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia?</p>
        <div class="image">
          <img style="width:100%;" src="https://placeholdit.imgix.net/~text?w=350&amp;h=150">
          <p>Image description text</p>
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="content">
        <h3>Heading</h3>
        <p>Quae est igitur causa istarum angustiarum? Vestri haec verecundius, illi fortasse constantius. Ego vero volo in virtute vim esse quam maximam; Quem Tiberina descensio festo illo die tanto gaudio affecit, quanto L. An dubium est, quin virtus ita
          maximam partem optineat in rebus humanis, ut reliquas obruat? Negat esse eam, inquit, propter se expetendam. O magnam vim ingenii causamque iustam, cur nova existeret disciplina! Perge porro.</p>
        <p>In qua quid est boni praeter summam voluptatem, et eam sempiternam? Si qua in iis corrigere voluit, deteriora fecit. Perge porro; Quippe: habes enim a rhetoribus; Quis est, qui non oderit libidinosam, protervam adolescentiam? Expectoque quid ad
          id, quod quaerebam, respondeas.
        </p>
        <div class="image">
          <img style="width:100%;" src="https://placeholdit.imgix.net/~text?w=350&amp;h=150">
          <p>Image description text</p>
        </div>
      </div>
    </div>
  </div>
</div>

Adjusting the padding-bottom on the column's newly created pseudo-element to suit your needs. You'll ideally need to limit the excerpt length.

Answer 3

use a separate .row div for the images below the current .row , and put the same kind of columns/divs with the same classes in there as you currently have for text and images.