/ Design with Bootstrap / How to center align vertically the container in bootstrap

There are 3 things that you need to do:

 

 1) Make sure that your body and html is set to 100%. This is very important. Otherwise this trick won’t be working. Use this code below:

html, body{
    height:100%; /* important to vertically align the container */
    margin:0;
    padding:0;
}

2) Wrap the “.container” class with “.vertical-center” class. For example:

<div class="vertical-center" >
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <%= yield %>          
      </div>
    </div>
  </div>
</div>

3) Add this code below to your css:

.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one 🙂       */
  display: flex;
  align-items: center;
}

No video for this post.

No issues for this post.

by ryzalyusoff