CODEWITHSUNDEEP
htmlcsstwitter-bootstrapcarouselcaption
Ashley K
Ashley K

Reputation: 403

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 should look like.

This is what it looks like now:

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>

Upvotes: 3

Views: 10376

Answers (3)

ilqar Rzayev
ilqar Rzayev

Reputation: 1

Add the following categories to .сarousel-caption, it should be able to work.

<style>
.carousel-caption {
    text-align: center;
    width: 100vw; /* Fill the entire width of the visible area of the browser */
    left: 50%; /* Align to center the page */
    transform: translateX(-50%); /* Centered horizontally */
}
</style>

Upvotes: 0

Dheerendra Jeevani
Dheerendra Jeevani

Reputation: 601

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

Upvotes: 5

Salvador Corado
Salvador Corado

Reputation: 51

you only need to add text-align: center becaus actually it uses the full width already

if something is floating u can use a clearfix to solve it, check this jsfidlle

title example

<div class="carousel-caption">
    <h1>
    Text for caption 1 here.
    </h1>
  </div>


.carousel-caption h1 {
 max-width: 100%;
 background-color: #ffb81c;
 text-align:center;
}

pd. i added the h1 tag to have a better semantic structure.

Upvotes: 0

Related Questions