Bootstrap 4 - col vertical alignment not working as expected

Question

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?

score 3 · Accepted Answer · answered Sep 07 '17 at 08:38

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>

Bootstrap 4 - col vertical alignment not working as expected

1 Answers1