How to vertically align content inside a column with Bootstrap 4

Question

I am building a grid layout with Bootstrap 4. I am trying to vertically align content inside a column while keeping the full height of the column.

Currently my layout looks like this:

However, I want the content of the columns aligned like this:

Current CSS:

html, body {
  height: 100%;
}

.flex-fill {
  flex: 1;
}

Current HTML:

<div class="container d-flex h-100 flex-column">
    <div class="row flex-fill d-flex">
      <div class="col-8 bg-dark m-2">
        TEXT
      </div>
      <div class="col bg-dark m-2">
        TEXT
      </div>
    </div>
    <div class="row flex-fill d-flex">
      <div class="col bg-dark m-2">
        TEXT
      </div>
  </div>
</div>

Please also see JSFiddle.

I already tried to use the .align-self-center class and was able to align the content in the middle of the row. However, I could not keep the full-height of the column.

Any ideas on how to achieve the target layout?

Thank you very much for your support!

I edited my post. Please see above. Sorry for the unclear question... — maxiw46, Jun 10 '19 at 16:35

cssyphus · Accepted Answer · 2021-04-24T13:31:40.397

NishargShah is correct about using Flexbox. Bootstrap was redesigned around Flexbox, and that is the core change from Bootstrap3 to Bootstrap4 (there are many other changes, but the switch from Floats to Flexbox is the core change).

However, there is a simpler way to do this:

Change:

  <div class="col-8 bg-dark m-2">
    TEXT
  </div>

to:

  <div class="col-8 bg-dark m-2 d-flex align-items-center">
    TEXT
  </div>

Modified jsFiddle

html, body {
  height: 100%;
  color:white !important;
}

.flex-fill {
  flex: 1;
}

.container {
  padding: 2em 1em;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<div class="container d-flex h-100 flex-column">
    <div class="row flex-fill d-flex">
      <div class="col-8 bg-dark m-2 d-flex align-items-center">
        TEXT
      </div>
      <div class="col bg-dark m-2 d-flex align-items-center">
        TEXT
      </div>
    </div>
    <div class="row flex-fill d-flex">
      <div class="col bg-dark m-2 d-flex align-items-center">
        TEXT
      </div>
    </div>
</div>

Short explanation:
d-flex turns on flexbox for this container
align-items is flexbox vertical align (for immediate children inside container)
justify-content is flexbox horizontal align (for immediate children inside container)

Notes:

If you are using Bootstrap, use the included Bootstrap classes wherever possible. Bootstrap has a number of pre-fab classes specifically for Flexbox.

One of the cool things about flexbox is that any container can be a flexbox parent -- even those that are flexbox items. That is, the same container can be both a flexbox child to the container above it, and a flexbox parent to the containers inside it.

Flexbox requires two things:

a parent container
child items

Some flexbox settings are set on the parent, the rest are set on the child items. In this case, the only settings you need are set on the parent.

References:

Excellent 20-min video tutorial

Best-of-breed flexbox cheatsheet

Bootstrap4 Flexbox classes

Unfortunately, now the BS .text-center class to center content horizontally is not working anymore. Any idea why? — maxiw46, Jun 10 '19 at 17:49
``Because I want you to remember forever the assistance I rendered * ahem * I encourage you (no, I strongly encourage you -- I would compel you if I could) to watch the 20-min video tut that I posted above.`` Seriously, you will be glad you did *(and no, I have no connection to the presenter - I was fortunate to find it and now pass it along)*. Note that there is another way to align text to center using flexbox: `justify-content: center;` (it goes on the parent). Perhaps that will do the trick? — cssyphus, Jun 10 '19 at 18:04
@gibberish bro I don't use bootstrap classes because its include `important` and that makes HTML very complex, by the way using more `important` we lose our site rank also — Nisharg Shah, Jun 10 '19 at 19:21
@gibberish by the way, its center whole `col`, so if I don't want the center whole block this answer is not correct answer, so specify it in your answer — Nisharg Shah, Jun 10 '19 at 19:27

Sina · Answer 2 · 2019-06-10T16:56:35.630

You can use

style="position: absolute;              
         top: 50%;"

for the positions.

html,
body {
  height: 100%;
}

.flex-fill {
  flex: 1;
}

.container {
  padding: 2em 1em;
}

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<div class="container d-flex h-100 flex-column">
  <div class="row flex-fill d-flex">
    <div class="col-8 bg-dark m-2">
      <p style="position: absolute;              
         top: 50%;">TEXT </p>
    </div>
    <div class="col bg-dark m-2">
      <p style="position: absolute;              
         top: 50%;">TEXT</p>
    </div>
  </div>
  <div class="row flex-fill d-flex">
    <div class="col bg-dark m-2">
      <p style="position: absolute;              
         top: 50%;">TEXT </p>
    </div>
  </div>
</div>

your code is not doing vertical center in every screen size, so your answer is wrong — Nisharg Shah, Jun 10 '19 at 17:17
Yeah, it does not work for every screen size because it was not in the question. Thanks for the point. — Sina, Jun 10 '19 at 17:19
if possible, add answer like that which code is support in every screen — Nisharg Shah, Jun 10 '19 at 17:21

score 0 · Answer 3 · answered Jun 10 '19 at 18:02

You don't need to the extra CSS. Just use the Bootstrap utility classes...

.min-vh-100 - for full content height
.d-flex - for display flex
.align-items-center - for vertical align
.justify-content-center - for horizontal align

HTML:

<div class="container d-flex min-vh-100 flex-column text-white">
    <div class="row flex-fill d-flex">
        <div class="col-8 bg-dark m-2 d-flex justify-content-center align-items-center">
            TEXT
        </div>
        <div class="col bg-dark m-2 d-flex justify-content-center align-items-center">
            TEXT
        </div>
    </div>
    <div class="row flex-fill d-flex">
        <div class="col bg-dark m-2 d-flex justify-content-center align-items-center">
            TEXT
        </div>
    </div>
</div>

https://www.codeply.com/go/RVA1mJhDTg?q=

How to vertically align content inside a column with Bootstrap 4

3 Answers3

Notes:

References: