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:
Share your thoughts in the comments
Please Login to comment...