How can I make rows align vertically?

Question

How can I align the <img> element vertically to the bottom with the element containing the text "Trump knocks Mosul offensive", using the current markup?

Code Snippet:

.beatthebottom {
  background-color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4">
      <div class="row">
        <div class="col-sm-12">
          <p>
            US election: 2 days to go
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            Emotions run high in final days of the campaign
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            Person yells 'gun' ... Trump whisked away
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            US election: 2 days to go
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            Reality Check: Whoppers of the campaign
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            World of troubles for next US president
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            Pope warns against walls ahead of election
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            Rudy Giuliani changes his story on FBI
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            Trump knocks Mosul offensive
          </p>
        </div>
      </div>

    </div>
    <div class="col-sm-8">
      <div class="row">
        <div class="col-sm-12">
          <p>
            'It's gone mad outside'
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            'It's gone mad outside'
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12 beatthebottom">
          <img class="img-responsive" src="http://placehold.it/350x150">
        </div>
      </div>
    </div>
  </div>
</div>

CodePen

Possible duplicate of [vertical-align with Bootstrap 3](http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3) — TylerH, Nov 06 '16 at 17:59

score 1 · Accepted Answer · answered Nov 06 '16 at 17:33

You can do this with flexbox with the following steps:

1. Make your parent .row a flex container that can wrap. This will make the direct child flex items.

2. Make your child .col-sm-8 element a flex container as well but with column direction.

3. Use auto margin top in the .row element containing your <img>.

.beatthebottom {
  background-color: red;
}
.flex-container-1 {
  display: flex;
  flex-wrap: wrap;
}
.flex-container-2 {
  display: flex;
  flex-direction: column;
}
.margin-top-auto {
  margin-top: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row flex-container-1">
    <div class="col-sm-4">
      <div class="row">
        <div class="col-sm-12">
          <p>
            US election: 2 days to go
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            Emotions run high in final days of the campaign
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            Person yells 'gun' ... Trump whisked away
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            US election: 2 days to go
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            Reality Check: Whoppers of the campaign
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            World of troubles for next US president
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            Pope warns against walls ahead of election
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            Rudy Giuliani changes his story on FBI
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            Trump knocks Mosul offensive
          </p>
        </div>
      </div>

    </div>
    <div class="col-sm-8 flex-container-2">
      <div class="row">
        <div class="col-sm-12">
          <p>
            'It's gone mad outside'
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            'It's gone mad outside'
          </p>
        </div>
      </div>
      <div class="row margin-top-auto">
        <div class="col-sm-12 beatthebottom">
          <img class="img-responsive" src="http://placehold.it/350x150">
        </div>
      </div>
    </div>
  </div>
</div>

Revised CodePen

Thanks! Working perfectly. I'll study it to see how it works exactly. — oreo27, Nov 08 '16 at 03:16

score 0 · Answer 2 · answered Nov 06 '16 at 17:41

0

Add empty div with clearfix class right after the end of first row of the container. Clearfix clears float, so floating container get align to the top, which I think what you need.

answered Nov 06 '16 at 17:41

quazar

570
4
14

How can I make rows align vertically?

2 Answers2