WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
Advertisements

How to Vertical Align a DIV in Bootstrap

Topic: Bootstrap / LessPrev|Next

Answer: Use the align-items-center Class

In Bootstrap 4, if you want to vertically align a <div> element in the center or middle, you can simply apply the class align-items-center on the containing element.

The following example will show you how to vertical align a grid column inside a row.

  • <div class="container">
  •     <div class="row align-items-center">
  •         <div class="col-md-12">Vertical Center Aligned Grid Column</div>
  •     </div>
  • </div>

Similarly, you can align a DIV element vertically in the middle of a containing element by using the class d-flex in combination with the class align-items-center, like this:

  • <div class="container">
  •     <div class="row align-items-center">
  •         <div class="col-md-12">
  •             <div class="box">Vertical Center Align a Div</div>
  •         </div>
  •     </div>
  • </div>

However, if you're using the Bootstrap 3 version you can still do it with some custom CSS. Let's try out the following example to understand how it basically works:

  • /* CSS code */
  • .vcenter-item{
  •     display: flex;
  •     align-items: center;
  • }
  •  
  • <!-- HTML code -->
  • <div class="wrapper vcenter-item">
  •     <div class="box">Vertically Centered Div</div>
  • </div>

Related FAQ

Here are some more FAQ related to this topic:

Advertisements
Font Awesome Icon Classes

Your Feedback:

We would love to hear from you, please drop us a line.