Vertical align text in Bootstrap card

Question

I have the following card, I am trying to vertically center align the text "Light card title", I have added align-middle but it does not have an effect. How can the text be vertically center aligned?

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>

                <div class="card bg-light mb-3" style="max-width: 18rem;;">
                    <div class="card-header">Total Views</div>
                    <div class="card-body" style=" height:150px">
                        <h5 class="card-title text-center align-middle">Light
                            card title</h5>
                    </div>
                </div>

If you want to use flex, change the classes on your card-body div to `
` That will align the content in the card body to the center. — Rich DeBourke, Jun 16 '21 at 03:06
like @RichDeBourke suggested .. use flex and add these classes to the card-body : `d-flex flex-column justify-content-center` instead of `align-middle` — WaLid LamRaoui, Jun 16 '21 at 03:32

score 3 · Accepted Answer · answered Jun 16 '21 at 07:14

Can you please check the below code? Hope it will work for you. In the Bootstrap 5 document, they have mentioned that to vertically center "non-inline content" (like <div>s and more), use our flex box utilities. With the help of these utilities, you can easily align the text vertically and horizontally center.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="card bg-light mb-3" style="max-width: 18rem;;">
  <div class="card-header">Total Views</div>
  <div class="card-body d-flex align-items-center justify-content-center" style=" height:150px">
    <h5 class="card-title">Light card title</h5>
  </div>
</div>

score 1 · Answer 2 · answered Jun 16 '21 at 11:31

There are several different ways to center align content. Here's a simple method for card content...

  <div class="card bg-light mb-3 justify-content-center" style="max-width: 18rem;;">
        <div class="card-header">Total Views</div>
        <div class="card-body d-flex" style="height:150px">
            <h5 class="card-title m-auto">Light card title</h5>
        </div>
  </div>

use d-flex for display:flex
use m-auto for auto margins

Demo

Related: Bootstrap 4 vertical align text won't center on card

Vertical align text in Bootstrap card

2 Answers2