How do I center a div using Bootstrap utilities?
Asked on Oct 01, 2025
Answer
In Bootstrap 5, you can easily center a div using utility classes. Here's a simple example to demonstrate how to center a div both horizontally and vertically.
<!-- 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 Div
</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- The `d-flex` class makes the container a flexbox.
- `justify-content-center` centers the div horizontally.
- `align-items-center` centers the div vertically.
- The `style="height: 100vh;"` ensures the container takes the full viewport height, allowing vertical centering.
Recommended Links:
← Back to All Questions