How to Center a Div with the mx-auto Class in Bootstrap 5 ?
Last Updated :
08 Feb, 2024
In this article, we will discuss two different methods to center a div using the mx-auto class in Bootstrap 5. These methods provide practical solutions for both container and flex layouts. The first approach uses the Bootstrap grid system to center a card within a container. The second approach uses flexbox utilities to demonstrate horizontal and vertical centering for a responsive layout.
Using mx-auto class in a Container
To center a div with the mx-auto class in Bootstrap 5, place the div within a container element and apply the mx-auto class to it. This approach utilizes the mx-auto class’s automatic horizontal margin setting, which centers the element within the containing element. It’s a simple and effective way to achieve horizontal centering in Bootstrap 5, ensuring responsiveness across various screen sizes.
Syntax
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card mt-5 text-center">
<!-- Content -->
</div>
</div>
</div>
</div>
Example: Below is the implementation of center a Div.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Using mx-auto class in a Container</title>
<link href=
rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card mt-5">
<div class="card-body text-center">
<img src=
class="img-fluid mb-3"
alt="GeeksforGeeks Logo"
style="max-width: 150px;">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h3>
Approach 1: Using mx-auto class in a Container
</h3>
<p>
GeeksforGeeks is a leading platform
that provides computer science resources
and coding challenges for programmers and
technology enthusiasts, along with interview
and exam preparations for
upcoming aspirants.
</p>
</div>
</div>
</div>
</div>
</div>
<script src=
</script>
</body>
</html>
|
Output:
Using mx-auto class in a Flex
In this approach, we are using Flex container (d-flex) and using alignment and justification utilities (align-items-center, justify-content-center) along with the mx-auto class on the target div (custom-container) to create the div element. This makes sure that the container is centered horizontally and vertically.
Syntax
<body class="d-flex align-items-center justify-content-center vh-100">
<div class="mx-auto custom-container p-4 text-center">
<!-- Content -->
</div>
</body>
Example: Below is the implementation of the above-discussed approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
rel="stylesheet">
<title>
Center Div with mx-auto in Flex
</title>
</head>
<body class=
"d-flex align-items-center justify-content-center
vh-100 bg-light">
<div class="mx-auto p-4 text-center bg-white shadow-sm">
<h1 class="text-success">GeeksforGeeks</h1>
<h3 class="mb-3">
Approach 2: Using mx-auto class in a Flex
</h3>
<p class="text-muted">
Explore our vast collection of programming
courses and articles at GeeksforGeeks.
</p>
class="btn btn-success">
Visit GeeksforGeeks
</a>
</div>
<script src=
</script>
</body>
</html>
|
Output:
.png)
Share your thoughts in the comments
Please Login to comment...