How do I vertically center content inside a Bootstrap column using utility classes?
Asked on Nov 10, 2025
Answer
To vertically center content inside a Bootstrap column, you can use Bootstrap's flexbox utilities. These utilities allow you to align items easily without custom CSS.
<!-- BEGIN COPY / PASTE -->
<div class="container">
<div class="row" style="height: 200px;">
<div class="col d-flex align-items-center justify-content-center">
<p>Centered Content</p>
</div>
</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- The `d-flex` class makes the column a flex container.
- `align-items-center` vertically centers the content within the column.
- `justify-content-center` horizontally centers the content.
- Adjust the `style="height: 200px;"` as needed to set the height of the row for demonstration.
Recommended Links: