How do I center a div horizontally and vertically using Bootstrap 5 utility classes?
Asked on Oct 20, 2025
Answer
To center a div both horizontally and vertically in Bootstrap 5, you can use the utility classes `d-flex`, `justify-content-center`, and `align-items-center`. These classes work together to center the content within a flexbox container.
<!-- BEGIN COPY / PASTE -->
<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
<div class="p-3 bg-primary text-white">
Centered Content
</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- Use `d-flex` to make the container a flexbox.
- `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, allowing vertical centering.
Recommended Links: