How can I use position utilities to overlay text on a card image?

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

How can I use position utilities to overlay text on a card image?

Asked on Sep 03, 2025

Answer

In Bootstrap 5, you can use position utilities to overlay text on a card image by setting the image as the background and positioning the text with absolute positioning. Here's a simple example:

<!-- BEGIN COPY / PASTE -->
        <div class="card" style="position: relative;">
            <img src="image.jpg" class="card-img" alt="Card image">
            <div class="card-img-overlay d-flex justify-content-center align-items-center">
                <h5 class="card-title text-white">Overlay Text</h5>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `card-img-overlay` class is used to position the text over the image.
`d-flex`, `justify-content-center`, and `align-items-center` are used to center the text both horizontally and vertically.
Ensure the text is readable by using a contrasting color, such as `text-white` for light text on a dark image.
Replace `image.jpg` with the actual path to your image.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

How can I use position utilities to overlay text on a card image?

Asked on Sep 03, 2025

Answer

The Q&A Network