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.