Vertically align nested rows using Bootstrap 4

Question

Using Bootstrap 4, I am having problems vertically aligning nested rows while trying to utilize align-items-start and align-items-end, respectively.

Here is my current code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row justify-content-around">

    <div class="col-sm-2 align-self-center"> <!-- Left side col -->
      <p>Content goes here</p>
      <p>Content goes here</p>
      <p>Content goes here</p>
      <p>Content goes here</p>
      <p>Content goes here</p>
      <p>Content goes here</p>
      <p>Content goes here</p>
    </div>

    <div class="col-sm-8"> <!-- Right side col -->
      <div class="row align-items-start" style="background-color:gray;"> <!-- Upper right row -->
        <div class="col">
          <p>Right col, upper left</p>
        </div>
        <div class="col">
          <p>Right col, upper right</p>
        </div>
      </div>

      <div class="row align-items-end" style="background-color:orange;"> <!-- Lower right row -->
        <div class="col">
          <p>Right col, lower left</p>
        </div>
        <div class="col">
          <p>Right col, lower middle</p>
        </div>
        <div class="col">
          <p>Right col, lower right</p>
        </div>
      </div>
    </div>

  </div>
</div>

Here is a fiddle: http://jsfiddle.net/SIRmisterD/x1hphsvb/17/

As far as I can tell when I inspect the element, the parent column (the col-sm-8 line) is correctly sized in relation to the left side column (col-sm-2) as they both have the same height. However, as soon as the two nested rows are introduced, the align-items-xxx classes are not being utilized.

Answer 1

Having the align-items-* classes for the rows will only affect their content, but not their own position. To achieve the desired effect, the parent of the two rows (the .col-sm-8 element) needs to have three classes:

• d-flex: make the column itself a flexbox (by default, only rows have display: flexbox in Bootstrap 4)
• flex-column: show children from top to bottom instead of left to right
• justify-content-between: make the children have space in between
  • This might seem wrong, as normally justify-content-between is applied to the X / main axis, but as we have already applied the flex-column class, the effect of this class will be inversed as well, affecting the Y axis instead

Inserting these three classes to the column and removing the unnecessary ones from the rows will achieve your desired layout.

Your updated snippet:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row justify-content-around align-items-stretch">
    <div class="col-sm-2">
      <!-- Left side col -->
      <p>Content goes here</p>
      <p>Content goes here</p>
      <p>Content goes here</p>
      <p>Content goes here</p>
      <p>Content goes here</p>
      <p>Content goes here</p>
      <p>Content goes here</p>
    </div>
    <div class="col-sm-8 d-flex flex-column justify-content-between">
      <!-- Right side col -->
      <div class="row" style="background-color:gray;">
        <!-- Upper right row -->
        <div class="col">
          <p>Right col, upper left</p>
        </div>
        <div class="col">
          <p>Right col, upper right</p>
        </div>
      </div>
      <div class="row" style="background-color:orange;">
        <!-- Lower right row -->
        <div class="col">
          <p>Right col, lower left</p>
        </div>
        <div class="col">
          <p>Right col, lower middle</p>
        </div>
        <div class="col">
          <p>Right col, lower right</p>
        </div>
      </div>
    </div>
  </div>
</div>

And the JSFiddle as well.

It seems that two Bootstrap style sheets are imported into the Fiddle, one of v4 and a customised Flatly one of v3 – this might cause issues as styling is applied from both classes, so it's best to keep the version 4 only.

For more information on flexbox, learn more from the guide at CSS-Tricks.com and about the Bootstrap 4 Grid System.