Can't seem to get the container div inside body to center align vertically with Bootstrap4

Question

I have gone through multiple Stack Overflow questions regarding the same topic, however I am simply not able to get this to work. I have almost tried all the solutions mentioned on below questions and none seemed to work for me.

Vertical Align Center in Bootstrap 4

Bootstrap 4 Center Vertical and Horizontal Alignment

This is how my code looks

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        body {
            height: 100%;
        }

        .col {
            border: 1px solid red;
        }

        .row {
            height: 200px;
            border: 1px solid blue;
        }
    </style>

</head>

<body>

<div class="container h-100 align-items-center">
    <div class="jumbotron my-auto">
        <div class="row">
            <div class="col align-self-end">
                col1
            </div>
            <div class="col align-self-start">
                col2
            </div>
        </div>
        <div class="row align-items-center">
            <div class="col">
                col1
            </div>
            <div class="col">
                col2
            </div>
        </div>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
</html>

What am I missing here?

Attached is a screenshot of my how page looks.

I know I can position the div in the center of the page using position property but I am curious to know if it can be done with just Bootstrap without adding any custom CSS.

score 1 · Accepted Answer · answered Jan 31 '19 at 16:35

One solution is to declare the container to take 100vh (100% of view port height), then you can add d-flex class to it, and center the jumbotron vertically using align-self-center.

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <title>Document</title>
  
  <style>
      .col {
          border: 1px solid red;
      }

      .row {
          height: 200px;
          border: 1px solid blue;
      }
      
      .my-container {
          height: 100vh;
      }
  </style>

</head>

<body>

<div class="container my-container d-flex">
  <div class="jumbotron w-100 align-self-center">

    <div class="row">
      <div class="col align-self-end">
        col1
      </div>
      <div class="col align-self-start">
        col2
      </div>
    </div>
    
    <div class="row align-items-center">
      <div class="col">
        col1
      </div>
      <div class="col">
        col2
      </div>
    </div>

  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

</body>
</html>

Wow, this works, i think i tried half of this solution because i did made the container as `flex-parent`, what i probably did wrong was applying the `h-100` class to container rather than setting its height manually to `100vh`. Not sure why the bootstrap class `h-100` didnt work, — Rohit, Jan 31 '19 at 18:03
`h-100` indicates that the element takes 100% of the parent's height, however, you need to define the height fo the parent at some point. Take into consideration to up-vote also if this answer helps you. — Shidersz, Jan 31 '19 at 18:18

Филип Матовић · Answer 2 · 2019-01-31T15:28:12.893

EDIT: Please check bootrap 4 docs, regarding this as they clearly state: "Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements." - https://getbootstrap.com/docs/4.0/utilities/vertical-align/

If i were you. For Div alignment i would just add: .jumbotron { margin-top: 20%: }

  <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        body {
            height: 100%;
        }

        .col {
            border: 1px solid red;
        }

        .row {
            height: 200px;
            border: 1px solid blue;
        }
        .jumbotron {
            margin-top: 20%:
        }
    </style>

</head>

<body>

<div class="container h-100 align-items-center">
    <div class="jumbotron my-auto">
        <div class="row">
            <div class="col align-self-center">
                col1
            </div>
            <div class="col align-self-center">
                col2
            </div>
        </div>
        <div class="row align-items-center">
            <div class="col">
                col1
            </div>
            <div class="col">
                col2
            </div>
        </div>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
</html>

first i am not aligning the inline or text in this case and infact i used the flexbox align property. Secondly adding margin to jumbotron would add the margin b/w jumbotron and container, I want my container div to be add the center. — Rohit, Jan 31 '19 at 15:32

Can't seem to get the container div inside body to center align vertically with Bootstrap4

2 Answers2