How do I center a div vertically and horizontally using Bootstrap grid system?
Asked on Nov 09, 2025
Answer
To center a div both vertically and horizontally using Bootstrap's grid system, you can use the `d-flex`, `justify-content-center`, and `align-items-center` classes.
<!-- BEGIN COPY / PASTE -->
<div class="container" style="height: 100vh;">
<div class="row h-100">
<div class="col-12 d-flex justify-content-center align-items-center">
<div class="p-3 border">
Centered Content
</div>
</div>
</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- The `container` class creates a responsive fixed-width container.
- The `row` class is set to full height using `h-100`.
- The `col-12` class takes the full width of the row.
- `d-flex` makes the column a flex container.
- `justify-content-center` centers the content horizontally.
- `align-items-center` centers the content vertically.
- The `style="height: 100vh;"` ensures the container takes the full viewport height.
Recommended Links: