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

Question

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?

Related if not dupe - https://stackoverflow.com/questions/36191516/center-and-bottom-align-flex-items — Paulie_D, Sep 22 '17 at 14:25

Asons · Accepted Answer · 2017-09-22T15:59:28.653

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>

score -1 · Answer 2 · edited Sep 22 '17 at 14:00

-1

It's the d-flex class that give you problems

Remove it or check here what better fits your needs

edited Sep 22 '17 at 14:00

Julian Schmuckli

3,681
11
37
64

answered Sep 22 '17 at 13:42

ivan.rosina

368
3
9

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

2 Answers2