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
|
1 2 3 4 |
.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.
|
1 2 3 4 5 6 7 |
.new-carousel-caption-position{ position: absolute; top: 20%; left: 50%; background-color: yellow; min-width: 200px; } |
Add jQuery Script to Retrieve Current Caption
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//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
|
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
<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> |