Skip to main content
K
katie haviland
Participant
January 7, 2023
Question

bootstrap carousel caption edit

  • January 7, 2023
  • 1 reply
  • 673 views

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

 

    This topic has been closed for replies.

    1 reply

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    January 7, 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
    K
    katie havilandAuthor
    Participant
    January 7, 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>

     

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    January 7, 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
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices