Bootstrap 4 - col vertical alignment not working as expected [duplicate] - html

Question

This question already has answers here:
Vertical alignment in Bootstrap 4
(2 answers)
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 5 years ago.
Reading the Bootstrap docs you can get to the alignment examples section.
It tells you can use use flexbox alignment utilities to vertically and horizontally align columns as Bootstrap CSS classes align-items-start, align-items-center and align-items-end but when I'm trying it the content is not vertically aligned as expected with a full height container, see the following code:
html,
body {
height: 100%;
}
.fill {
min-height: 100%;
height: auto !important;
height: 100%;
background-color: lightblue;
}
.col {
border: 1px solid red;
}
<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 fill">
<div class="row align-items-start">
<div class="col text-center">
align-items-start
</div>
</div>
<div class="row align-items-center">
<div class="col text-center">
align-items-center
</div>
</div>
<div class="row align-items-end">
<div class="col text-center">
align-items-end
</div>
</div>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
I expected to have align-items-center content on the vertical middle and align-items-end at the bottom of the container.
What I'm doing wrong or what I misunderstood?

Answer 1

In order to vertically align items in flex-container you need to give height to flex-container.
.row{
min-height:100px;
}
html,
body {
height: 100%;
}
.fill {
min-height: 100%;
height: auto !important;
height: 100%;
background-color: lightblue;
}
.col {
border: 1px solid red;
}
.row{
min-height:100px;
}
<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 fill">
<div class="row align-items-start">
<div class="col text-center">
align-items-start
</div>
</div>
<div class="row align-items-center">
<div class="col text-center">
align-items-center
</div>
</div>
<div class="row align-items-end">
<div class="col text-center">
align-items-end
</div>
</div>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>