Bootstrap Q&A Part of the Q&A Network

What's the best way to vertically center content in a Bootstrap card using utility classes?

Asked on Nov 08, 2025

Answer

To vertically center content in a Bootstrap card, you can use Bootstrap's flexbox utility classes. This approach is simple and effective.

<!-- BEGIN COPY / PASTE -->
        <div class="card" style="height: 200px;">
            <div class="card-body d-flex align-items-center justify-content-center">
                <p class="card-text">Centered Content</p>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `d-flex` class makes the card body a flex container.
`align-items-center` vertically centers the content.
`justify-content-center` horizontally centers the content.
Adjust the `style="height: 200px;"` to fit your layout needs.

✅ Answered with Bootstrap 5 best practices.

Recommended Links:

Q&A Network Bootstrap Builder Creative Tim

← Back to All Questions

Web Analytics