center a div in bootstrap

How to center a div in bootstrap 5? (Vertically and horizontally)

In Bootstrap 5, aligning content to the center of the DIV is as simple as converting the DIV into a flexbox with the d-flex class property and then using the align-items-center property to align the content in the middle of the DIV vertically.

Let’s take a look at how easy it is to vertically align information within a DIV.

Read more: How to center a DIV in tailwind CSS?

Here’s a DIV with some example content in my bootstrap 5.

<div class="bg-info text-white" style="height:200px">
      <h1>This is an example content</h1>
 </div>

Align and Center content horizontally 

The bootstrap class justify-content-center with d-flex makes the content in the center horizontally.

<div class="d-flex justify-content-center bg-success" style="height:200px">
       <h1>This is an example content</h1>
 </div>

Align and Center content vertically 

To align content vertically in the center of the div, we’ll use the Bootstrap 5 flexbox class align-items-center.

<div class="d-flex align-items-center bg-success" style="height:200px">
        <h1>This is an example content</h1>
  </div>

Center a DIV – Vertically and Horizontally

We will use the Bootstrap 5 flexbox property justify-content-center to align content horizontally in the center of the div.

The class align-items-center makes the content vertically centered.

<div class="d-flex align-items-center justify-content-center bg-success" style="height:200px">
       <h1>This is an example content</h1>
 </div>

With a complete set of responsive flexbox classes, you can quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more.

AdBlocker Message

Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.