How do i center a div in bootstrap 5?

The examples below show you how to vertically center an element that locates inside a div element. We are going to use Bootstrap 5 and its d-flex class to make the parent div become a flexbox container.

Example 1: Vertically Center

Screenshot:

How do i center a div in bootstrap 5?

The code:

<html lang="en">
  <head>
    <!-- Bootstrap 5 -->
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <title>Kindacode.com</title>
  </head>

  <body>
    <div
      class="bg-success d-flex align-items-center"
      style="width: 500px; height: 400px"
    >
      <div class="bg-warning" style="width: 150; height: 100"></div>
    </div>
  </body>
</html>

Example 2: Both Vertically And Horizontally Center

Screenshot:

How do i center a div in bootstrap 5?

The code:

<html lang="en">
  <head>
    <!-- Bootstrap 5 -->
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <title>Kindacode.com</title>
  </head>

  <body>
    <div
      class="bg-info d-flex align-items-center justify-content-center"
      style="width: 500px; height: 400px"
    >
      <div class="bg-warning" style="width: 150; height: 100"></div>
    </div>
  </body>
</html>

If you replace the child div by a text, the result will be the same:

How do i center a div in bootstrap 5?

The code:

 <div
      class="bg-info d-flex align-items-center justify-content-center"
      style="width: 500px; height: 400px"
    >
      <h2>KindaCode.com</h2>
    </div>

Final Words

We’ve gone through a few examples of vertical alignment with Bootstrap 5. If you’d like to explore more new and interesting stuff of modern frontend development, take a look at the following articles:

  • Bootstrap 5: How to Create Icon Buttons with Text
  • How to Correctly Use Bootstrap 5 in Next.js
  • Bootstrap 5: Card Examples
  • CSS: Center Text inside a Div with Flexbox
  • CSS: Adjust the Gap between Text and Underline

You can also check out our CSS category page for the latest tutorials and examples.

How to vertically align anything

How do i center a div in bootstrap 5?

It’s tricky.

Getting elements to center align vertically has always been a challenge in CSS, let alone Bootstrap. In this story I’ll examine all the new approaches in Bootstrap 4, which are simpler that vertical center in Bootstrap 3.

Now that Bootstrap 4 is flexbox by default, vertical alignment gets a little easier. In general, there are 3 different approaches to vertical alignment…

  1. Auto-margins
  2. Flexbox utilities
  3. Display utilities along with the Vertical Align utilities.

At first, the “Vertical Align” utilities would seem an obvious choice, but these only work with inline and table display elements. Consider the following vertical alignment options and scenarios.

In general, there are 2 types of vertical alignment scenarios you’ll encounter…

  1. vertical centering within a parent container.
  2. or, vertical centering relative to adjacent elements.

1 — Vertical Center Using Auto Margins

One way to vertically center is to use my-auto. This will center the element within it’s flexbox container (The Bootstrap 4 .row is display:flex). For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.

<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>

my-auto represents margins on the vertical y-axis, and is equivalent to:

margin-top: auto;
margin-bottom: auto;

Demo — Vertical Center Using Auto Margins

2 — Vertical Center with Flexbox

Since the Bootstrap 4 .row class is now display:flex you can simply use the new align-self-center flexbox utility on any column to vertically center it:

<div class=”row”>
<div class=”col-6 align-self-center”>
<div class=”card card-block”>
Center
</div>
</div>
<div class=”col-6">
<div class=”card card-inverse card-danger”>
Taller
</div>
</div>
</div>

or, use align-items-center on the entire .row to vertically center align all col-* (columns) in the row…

<div class=”row align-items-center”>
<div class=”col-6”>
<div class=”card card-block”>
Center
</div>
</div>
<div class=”col-6”>
<div class=”card card-inverse card-danger”>
Taller
</div>
</div>
</div>

Demo — Vertical Center Different Height Adjacent Columns

3 — Vertical Center Using Display Utils

Bootstrap 4 has now has display utils that are used a wrapper for the CSS display propery such asdisplay:block, display:inline, display:table-cell, display:none, etc.. These can be used with the vertical alignment utils to align inline, inline-block or table cell elements.

<div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-block d-table-cell align-middle">
I am groot
</div>
</div>
</div>

Demo — Vertical Center Using Display Utils

To following along with the latest Bootstrap 4 developments, examples and themes also check out my Bootstrap4.guide

How do I center a specific div?

You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.

How do I center a card in bootstrap 5?

1 Answer.
You can make the card take 100% of the 3 columns. Replacing your width: 18rem; with width: 100% , or you can use w-100 class of Bootstrap..
You can add a mx-auto to each card, which will align it to the center of the 3 columns it has..

How do I center a body in bootstrap?

1 — Vertical Center Using Auto Margins One way to vertically center is to use my-auto . This will center the element within it's flexbox container (The Bootstrap 4 . row is display:flex ). For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.