Bootstrap v5 - My Awesome Moments

By default Bootstrap 5, put the caption on the image and no way you can change the caption position by modifying only the Bootstrap CSS.

You need to change the CSS and add jQuery to do this.

After few tries, I manage to do put the carousel caption outside of images for large screen. For small screen the caption is still on the image.

For small screen, to make the caption outside of image, you can change the CSS by using CSS media screen.

Demo – Bootstrap 5 Carousel Caption Outside Image

How To Change Bootstrap 5 Carousel Caption Position

CSS Not to Display Default Caption Position

.carousel-caption{
    /* not to display caption at its current position */
    display: none !important;
}

.carousel-caption{

/* not to display caption at its current position */

display: none !important;

}

Add CSS to Display New Carousel Caption Position

You can change the CSS to where you want to put your text.

.new-carousel-caption-position{
    position: absolute; 
    top: 20%; 
    left: 50%; 
    background-color: yellow; 
    min-width: 200px;
}

.new-carousel-caption-position{

position: absolute;

top: 20%;

left: 50%;

background-color: yellow;

min-width: 200px;

}

Add jQuery Script to Retrieve Current Caption

   //put carousel caption to new position which is at #newTextPosition
	jQuery( document ).ready(function() {

        //by default show the first slide description
        let html = jQuery('#caption-0').html();
        jQuery('#newTextPosition').html(html);

        jQuery("#carouselExampleCaptions").on('slide.bs.carousel', function(evt) {

            //step - current slide e.g 0, 1, 2
            let step = jQuery(evt.relatedTarget).index(); 
            html = jQuery('#caption-' + step).html();
            jQuery('#newTextPosition').html(html);

        });

    });

//put carousel caption to new position which is at #newTextPosition

jQuery( document ).ready(function() {

//by default show the first slide description

let html = jQuery('#caption-0').html();

jQuery('#newTextPosition').html(html);

jQuery("#carouselExampleCaptions").on('slide.bs.carousel', function(evt) {

//step - current slide e.g 0, 1, 2

let step = jQuery(evt.relatedTarget).index();

html = jQuery('#caption-' + step).html();

jQuery('#newTextPosition').html(html);

});

Add id to each carousel-caption

 <!-- ensure id="caption-0" to be included in order to retrieve text via jQuery -->
<div id="caption-0" class="carousel-caption d-none d-md-block">

1 2	<!-- ensure id="caption-0" to be included in order to retrieve text via jQuery --> <div id="caption-0" class="carousel-caption d-none d-md-block">

Full Source Code

<html>
<head>
<title>Demo - Bootstrap 5 Carousel Caption outside image</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>


<style>

.carousel-caption{
    /* not to display caption at its current position */
    display: none !important;
}

.new-carousel-caption-position{
    position: absolute; 
    top: 20%; 
    left: 50%; 
    background-color: yellow; 
    min-width: 200px;
}
</style>

<script>
    //put carousel caption to new position which is at #newTextPosition
	jQuery( document ).ready(function() {

        //by default show the first slide description
        let html = jQuery('#caption-0').html();
        jQuery('#newTextPosition').html(html);

        jQuery("#carouselExampleCaptions").on('slide.bs.carousel', function(evt) {

            //step - current slide e.g 0, 1, 2
            let step = jQuery(evt.relatedTarget).index(); 
            html = jQuery('#caption-' + step).html();
            jQuery('#newTextPosition').html(html);

        });

    });
</script>
</head>
<body>
<div style="max-width: 500px;">
<div id="carouselExampleCaptions" class="carousel carousel-dark slide" data-bs-ride="carousel">
                            <div class="carousel-indicators">
                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
                            </div>
                            <div class="carousel-inner">
                                <div class="carousel-item active">
                                <img src="https://www.awesomegrasp.com/wp-content/uploads/2022/01/7-spice-restaurant.jpeg" class="img-fluid" alt="...">
                                <!-- ensure id="caption-0" to be included in order to retrieve text via jQuery -->
                                <div id="caption-0" class="carousel-caption d-none d-md-block">
                                    <h5>First slide label</h5>
                                    <p>Some representative placeholder content for the first slide.</p>
                                </div>
                                </div>
                                <div class="carousel-item">
                                <img src="https://www.awesomegrasp.com/wp-content/uploads/2022/02/airbnb-meridin-medini-kitchen.jpeg" class="img-fluid" alt="...">
                                <div id="caption-1" class="carousel-caption d-none d-md-block">
                                    <h5>Second slide label</h5>
                                    <p>Some representative placeholder content for the second slide.</p>
                                </div>
                                </div>

                                <div class="carousel-item">
                                <img src="https://www.awesomegrasp.com/wp-content/uploads/2022/01/7-spice-indian-cuisine-johor-bahru-butter-chicken.jpeg" class="img-fluid" alt="...">
                                <div id="caption-2" class="carousel-caption d-none d-md-block">
                                    <h5>Third slide label</h5>
                                    <p>Some representative placeholder content for the third slide.</p>
                                </div>
                                </div>

                            </div>
                            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Previous</span>
                            </button>
                            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Next</span>
                            </button>
                                </div>
                            </div> 



</div>
<div id="newTextPosition" class="new-carousel-caption-position">

</div>

</body>
</html>

<html>

<head>

<title>Demo - Bootstrap 5 Carousel Caption outside image</title>

<style>

.carousel-caption{

/* not to display caption at its current position */

display: none !important;

}

.new-carousel-caption-position{

position: absolute;

top: 20%;

left: 50%;

background-color: yellow;

min-width: 200px;

}

</style>

//put carousel caption to new position which is at #newTextPosition

jQuery( document ).ready(function() {

//by default show the first slide description

let html = jQuery('#caption-0').html();

jQuery('#newTextPosition').html(html);

jQuery("#carouselExampleCaptions").on('slide.bs.carousel', function(evt) {

//step - current slide e.g 0, 1, 2

let step = jQuery(evt.relatedTarget).index();

html = jQuery('#caption-' + step).html();

jQuery('#newTextPosition').html(html);

});

</script>

</head>

<body>

</div>

<h5>First slide label</h5>

<p>Some representative placeholder content for the first slide.</p>

</div>

<h5>Second slide label</h5>

<p>Some representative placeholder content for the second slide.</p>

</div>

<h5>Third slide label</h5>

<p>Some representative placeholder content for the third slide.</p>

</div>

<span class="visually-hidden">Previous</span>

</button>

</button>

</div>

</div>

</body>

</html>

I couldn’t find an easy tutorial how to do text on image for Bootstrap version 5 when you mouse hover an image or a static text on the image.
So I have to try few solutions before get it right.

The solution is using purely CSS without any Javascript

The CSS

.text-on-image {
    position: relative;
}

.text {
    position: absolute;   
    bottom: 0;
    left: 0;
    display: none;
}

.text-active{
    position: absolute;   
    bottom: 0;
    left: 0;
    display: block;
    background: white;
    width: 100%;
    height: 20%;
}

.text-on-image:hover .text {
    display: block;
    background: blue;
    width: 100%;
    height: 20%;
}

.text-on-image {

position: relative;

}

.text {

position: absolute;

bottom: 0;

left: 0;

display: none;

}

.text-active{

position: absolute;

bottom: 0;

left: 0;

display: block;

background: white;

width: 100%;

height: 20%;

}

.text-on-image:hover .text {

display: block;

background: blue;

width: 100%;

height: 20%;

}

How To Use It

Wrap the image in a div with class=”text-on-image”
Under the div wrapper,include a text div with class=”text”
You can add link or button

Demo on JSFiddle

Tag: Bootstrap v5

Bootstrap 5 Carousel Caption Outside of Image

How To Change Bootstrap 5 Carousel Caption Position

CSS Not to Display Default Caption Position

Add CSS to Display New Carousel Caption Position

Add jQuery Script to Retrieve Current Caption

Add id to each carousel-caption

Full Source Code

Bootstrap version 5 Text On Image When Hover or Static Text

The CSS

How To Use It