• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

bootstrap carousel caption edit

New Here ,
Jan 07, 2023 Jan 07, 2023

Copy link to clipboard

Copied

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

 

Views

275

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 07, 2023 Jan 07, 2023

Copy link to clipboard

Copied

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 07, 2023 Jan 07, 2023

Copy link to clipboard

Copied

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>

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 07, 2023 Jan 07, 2023

Copy link to clipboard

Copied

<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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 07, 2023 Jan 07, 2023

Copy link to clipboard

Copied

See this working example.

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 08, 2023 Jan 08, 2023

Copy link to clipboard

Copied

LATEST
quote

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);
}
 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines