We will see how to center an element Vertical and Horizontal Alignment in Bootstrap 5. Creating visually appealing and structured layouts, in web development often involves ensuring control over the alignment of elements. In Bootstrap 5 achieving both vertical and horizontal center alignment for elements is an encountered requirement.

Before that, let’s first create a basic HTML structure in which the body consists of a centered `<h1>` element within a `<div>`, and the viewport is configured for responsiveness. Also, add the Bootstrap’s CSS framework from a CDN. Use the Below CDN link and attach it to the head of the HTML code.

Bootstrap CDN Link:

<link href= “https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css”rel=”stylesheet” integrity= “sha384EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC”crossorigin=”anonymous”>

Now that, we have created the basic HTML structure let’s see the examples of using the bootstrap to center the element.

Examples to Center an Element in Bootstrap 5

1. Using Bootstraps Built-in Classes:

Bootstrap 5 provides a range of utility classes that make it easy to center elements. These classes include d-flex, align-items-center, justify-content-center, and more.

Syntax:

<div class="d-flex align-items-center justify-content-center">
         <!-- Content -->
</div>

Output:

2. Using Bootstrap Grid System:

Bootstrap Grid is a tool, for creating layouts and ensuring that elements are properly centered within a grid container. It’s particularly useful, for designs where precise alignment of elements is desired.

Syntax:

<div class="row vh-100 align-items-center justify-content-center">
        <div class="row">
            <div class="col-12 text-center">
                <!-- Content -->
            </div>
        </div>
</div>

Output: