[FIXED] How can I have the first row at the top and the second row vertically centered?

Issue

I'm using Bootstrap 5 and I'm trying to get the first row to be at the top of the page and the second row to occupy the rest of the viewport and have its content vertically centered without scrollbars (assuming the viewport is high enough). Here's the basic code

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container min-vh-100">
  <div class="row">
    <div class="col-12 col-md-2">
      Content
    </div>
    <div class="col-12 col-md-10">
      Content
    </div>
  </div>

  <div class="row min-vh-100 align-items-center">
    <div class="col-12 col-lg-6">
      Content
    </div>
    <div class="col-12 col-lg-6">
      Content
    </div>
  </div>
</div>

The second row does correctly center its content, however, because I'm using the min-vh-100 class it produces scroll bars (removing the first row makes the scroll bars go away as expected). Changing the second row's min-vh-100 to h-100 class doesn't help (actually makes things worse). The problem seems to be how to tell the second row to occupy 100% of the parent's remaining height and not 100% of the viewport height.

Solution

You need the d-flex and flex-column classes on your container. Then, rather than forcing height on the second row, use flex-fill to get it to use the remaining space. Fixed sizing should be a last resort.

See https://getbootstrap.com/docs/5.0/utilities/flex.

.row:first-child {
  background: thistle;
}

.row:last-child {
  background: moccasin;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container min-vh-100 d-flex flex-column">
  <div class="row">
    <div class="col-2">
      Content
    </div>
    <div class="col-10">
      Content
    </div>
  </div>

  <div class="row flex-fill align-items-center">
    <div class="col-6">
      Content
    </div>
    <div class="col-6">
      Content
    </div>
  </div>
</div>

Answered By - isherwood

Answer Checked By - Cary Denson (PHPFixing Admin)