Are you struggling to center text in a Bootstrap card overlay without using custom CSS?

Look no further! In this tutorial, we will show you how to achieve this using Bootstrap 5.

Let’s say you have a Bootstrap 5 card with an overlay containing text and buttons.

By default, the overlay content may not be centered both horizontally and vertically, making it challenging to achieve the desired result.

<div class="col-md-4 col-xl-4">
 <div class="card text-white">
   <img src="./images/transplanting.webp" class="img-fluid card-img" alt="...">
             
    <div class="card-img-overlay">

     <div>
     <h3 class="card-title">The Top 3 Challenges of Prairie Crop Production</h3>
     <a href="#" class="btn btn-dark">Read More</a>
     <p class="card-text"><small>Last updated 3 mins ago</small></p>
     </div>

    </div>
 </div>
</div>

This is what the default view looks like-

A bootstrap 5 card with overlay text and buttons

bootstrap 5 card overlay with text button not centered

 

Many Bootstrap users have tried using pre-defined classes like “.mx-auto” or “.item-align-center” or “text-center”. But in most cases, these classes do not work well with card overlays.

How to center align text in Bootstrap card overlay

After much experimentation, we have discovered the solution.

To center the overlay content in the card-

  • Add an additional “.d-flex” class to the card overlay div.
  • Then, add “align-self-center” and “text-center” to the wrapper that contains the content to be centered.

 

Here’s the final code:


<div class="col-md-4 col-xl-4">
 <div class="card text-white">
   <img src="./images/transplanting.webp" class="img-fluid card-img" alt="...">
   
   <div class="card-img-overlay d-flex">

    <div class="align-self-center text-center">
      <h3 class="card-title">The Top 3 Challenges of Prairie Crop Production</h3>
      <a href="#" class="btn btn-dark">Read More</a>
      <p class="card-text"><small>Last updated 3 mins ago</small></p>
    </div>
               
   </div>
 </div>
</div>

And voila! You’ll see that the content is now centered in the Bootstrap card overlay. We hope this tutorial was helpful to you!

bootstrap 5 card overlay with text at center

bootstrap 5 card overlay with text at the center