How to Center an Element Vertical and Horizontal Alignment in Bootstrap 5 ?
Last Updated :
06 Mar, 2024
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/bootstrap@5.0.2/dist/css/bootstrap.min.css”rel=”stylesheet” integrity= “sha384EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC”crossorigin=”anonymous”>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<title>Center Element in Bootstrap 5</title>
</head>
<body>
<div>
<h1>Centered Element</h1>
</div>
</body>
</html>
|
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>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<title>Center Element in Bootstrap 5</title>
</head>
<body>
<div class="container d-flex
align-items-center
justify-content-center
min-vh-100">
<h1>Centered Element</h1>
</div>
</body>
</html>
|
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>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<title>Center Element in Bootstrap 5</title>
</head>
<body>
<div class="row vh-100
align-items-center
justify-content-center">
<div class="row">
<div class="col-12 text-center">
<h1>Centered Element</h1>
</div>
</div>
</div>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...