schwindelig schwindelig - 27 days ago 18
CSS Question

Bootstrap 4 Vertically center a row within d-flex container-fluid

I'm trying implement a component with Bootstrap 4 that looks something like this:

+-------------------------+
| Row 1 - Top |
+-------------------------+
| |
| |
+-------------------------+
| Row 2 - Vertical Center |
+-------------------------+
| |
| |
| |
| |
+-------------------------+


The height of the container is supposed to be 100vh.
According to my understanding, using flex would be an approach to solve this problem.

This is the markup I currently have: http://codeply.com/go/RRMwIHt8QA

As you can see, there seems to be some kind of offset of Row 2. Any ideas what's causing this and how to make the row take the full width of the available space?

Answer Source

To accomplish that you first need to add flex-column to the container so the row's stack vertically.

Then the row's need align-items-start align-content-start to prevent them from stretching.

Finally, using a pseudo, here ::after, you can match the first row so the second row can be vertically centered. An alternative is to position the first row absolute, though I find the pseudo version more responsive.

Fiddle demo

Stack snippet

.test-container {
  height: 100vh;
}
.test-container .row:first-child,
.test-container::after {
  content: '';
  flex: 1 1 0;
}

/* styling for this demo */
.test-container .row > div {
  border: 1px dashed lightgray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex flex-column container-fluid test-container">
  <div class="row align-items-start align-content-start">
    <div class="col-4">R1-C1</div>
    <div class="col-4">R1-C2</div>
    <div class="col-4">R1-C3</div>
  </div>

  <div class="row align-items-start align-content-start">
    <div class="col-4">R2-C1</div>
    <div class="col-4">R2-C2</div>
    <div class="col-4">R2-C3</div>
  </div>
</div>