bootstrap carousel caption edit

Report · Jan 07, 2023

Hi - Is there a way to put a box behind the caption so that it can be seen on a variety of different images?

Report · Jan 07, 2023

Use CSS background & color. Adjust values to suit.

Embedded CSS inside document <head> tag.

<style>
.carousel-caption {
 background: rgba(230,28,31,0.5);
 color: rgba(0,0,0,1);
}
</style>

HTML Carousel code:

<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://dummyimage.com/1200x300/000/fff" alt="placeholder">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Caption 1 text here...</p>
</div>
</div>
<div class="carousel-item">
<img src="https://dummyimage.com/1200x300/0ff/000" alt="placeholder">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Caption 2 text here...</p>
</div>
</div>
<div class="carousel-item">
<img src="https://dummyimage.com/1200x300/ff0/555" alt="placeholder">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Caption 3 text here...</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>

Hope that helps.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 07, 2023

I am feeling a bit on the dim side right now in my learning process. I can't seem to see where I change to background of the caption. I was able to get rid of the overall gray behind the images, but I cant see the code for the captions...

This is what I have right now. Am I blind or just too much of a novice:

</nav>
<br>
<div id="carouselExampleIndicators1" class="carousel slide" data-ride="carousel" style="background-color: none">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators1" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators1" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active"> <img class="d-block mx-auto img-fluid" src="images/dont-dive-bw_0249.jpg" alt="First slide">
<div class="carousel-caption">
<h5>Photography</h5>
</div>
</div>
<div class="carousel-item"> <img class="d-block mx-auto img-fluid" src="images/fog_0325.jpg" alt="Second slide">
<div class="carousel-caption">
<h5>Photograph</h5>
</div>
</div>
<div class="carousel-item"> <img class="d-block mx-auto img-fluid" src="images/mel-01.jpg" alt="Third slide">
<div class="carousel-caption">
<h5>Portrait Photography</h5>
</div>
</div>
<div class="carousel-item"> <img class="d-block mx-auto" img-fluid" src="images/group_cropped.jpg" alt="Forth slide">
<div class="carousel-caption">
<h5>Client Photography</h5>
</div>
</div>
<div class="carousel-item"> <img class="d-block mx-auto" img-fluid" src="images/Voces_0087.jpg" alt="Fifth slide">
<div class="carousel-caption">
<h5>Client Photography</h5>
</div>
</div>
<div class="carousel-item"> <img class="d-block mx-auto" img-fluid" src="images/BooksnBoxes_0243.jpg" alt="Sixth slide">
<div class="carousel-caption">
<h5>Book Binding and Box Making</h5>
</div>
</div>
<div class="carousel-item"> <img class="d-block mx-auto" img-fluid" src="images/TRoT67.jpg" alt="Seventh slide">
<div class="carousel-caption">
<h5>Client Retouching</h5>
</div>
</div>
<div class="carousel-item"> <img class="d-block mx-auto img-fluid" src="images/Pinhole_0109.jpg" alt="Eighth slide">
<div class="carousel-caption">
<h5>Pinhole Camera, Paper Negative Class Project</h5>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
</div>
</div>

Report · Jan 07, 2023

<div class="carousel-caption">
<h5>Photography</h5>
</div>

However, you DO NOT add CSS to the HTML markup. You add CSS to <style> tags between the document's <head> tag.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 07, 2023

See this working example.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 08, 2023

I am feeling a bit on the dim side right now in my learning process. I can't seem to see where I change to background of the caption. I was able to get rid of the overall gray behind the images, but I cant see the code for the captions...
This is what I have right now. Am I blind or just too much of a novice:

By @katie haviland

Another option would be to make the images slighly darker by deploying an overlay so white text stands out and doesnt get lost when images have a lighter area where the text overlays them.

You can add an overlay using the css below either added to the <head></head> section of your pages code in-between <style>CSS GOES HERE</style> tags or you can add it without the <style></style> tags to a separate css style sheet link to your page AFTER the link to the bootstrap css file.

I often prefer this option as putting a background color behind the caption can sometimes lool a bit boxy.

CSS FOR OVERLAY:

.carousel::after {
content: "";
position: absolute;
top: 0;
height: 100%;
width: 100%;
display: block;
background-color: rgba(0, 0, 0, 0.5);
}

You could also apply css text shadow if the text is of sufficient size, which will make it more readable, but this can look a bit cheap.

CSS FOR TEXT SHADOW:

.carousel h3, .carousel p {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}