Ashley K Ashley K - 7 months ago 164
HTML Question

How can I make a Bootstrap carousel caption stretch the full width of the carousel?

I have a carousel that's the full width of the page. Now I need to make the carousel-caption the full width of the page as well with a yellow background. The background should be the full width of the page, but the actual caption text should be centered.

This is what it should look like.

This is what it looks like now.

HTML:

<!--START CAROUSEL-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../../images/LD/desktop_hero1.png" alt="...">
<div class="carousel-caption">
Text for caption 1 here.
</div>
</div>
<div class="item">
<img src="../../images/LD/desktop_hero2.png" alt="...">
<div class="carousel-caption">
Text for caption 2 here.
</div>
</div>
<div class="item">
<img src="../../images/LD/desktop_hero3.png" alt="...">
<div class="carousel-caption">
Text for caption 3 here.
</div>
</div>
</div>

<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--END CAROUSEL-->


CSS:

<style type="text/css">
.carousel-caption {
max-width: 100%;
width:100%;
background-color: #ffb81c;
}
</style>

Answer

carousel-caption class declares the div to have an absolute positioning with its position to be 15 % from left.

So you can try to override that. Here is the css:

.carousel-caption {
    max-width: 100%;
    width:100%;
    background-color: #ffb81c;
    left: 0;
}