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/[email protected]/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>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/[email protected]/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>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments