How to Align content vertically inside a div in Bootstrap 5

In this short post, lets see how simple it is to vertically align content inside a DIV.

Here is a nice little DIV in my bootstrap 5 with a little of example content.

<div id="example-div" class="bg-info border" style="height:100px">
      <p>This is a content</p>
 </div>

 

Here is how it looks

div with content without vertically aligned

Align / Center content Vertically 

Aligning content to the center of the DIV is very simple in Bootstrap 5, You just have to convert the div into a flex box using d-flex class property and then use the property align-items-center to vertically align the content in the middle of the div.

<div id="example-div" class="bg-info border d-flex aligns-items-center" style="height:100px">
      <p>This is a content</p>
 </div>

Here is how the div looks now

vertically align content in the center bootstrap 5

 

Content in the center of the DIV – Vertiaclly and Horizontally

We can now make use of another flex box property justify-content-center of Bootstrap 5, which will help to align content in the center of the div horizontally.

<div id="example-div" class="bg-info border d-flex aligns-items-center justify-content-center" style="height:100px">
      <p>This is a content</p>
 </div>

Here is the result.

align content in the center of div bootstrap 5

Laravel / WP Hosting on Cloudways

Easy website management with Amazing Site Speed and Affordable Prices (Starting 5 $ / month)
Use promo 5Balloons for 10% discount

Related Articles

Site Footer