Create bootstrap carousel with captions instead of dots

Question

Standard bootstrap carousel can contains dots to change slides (example on bootstrap page).

However, I recently read Why Users Aren't Clicking Your Home Page Carousel which proposed using captions instead of dots like below:

Is this option possible in bootstrap? If so, how can I do so?

Answer 1

You can doing this by just overriding the styles on the carousel-indicators list items.

Here's a typical indicators section:

<ul class="carousel-indicators">
  <li data-target="#myCarousel" data-slide-to="0" class="active">One</li>
  <li data-target="#myCarousel" data-slide-to="1">Two</li>
  <li data-target="#myCarousel" data-slide-to="2">Three</li>
</ul>

You'll want to override some of the default Bootstrap styles:

Convert the display from dots to rectangles by adding a width and height and removing the border-radius:

Then get the text back by removing the negative text-indent added by Bootstrap:

Finally, add your own background and border and style however else you like.
The full styling should look like this:

.carousel-indicators > li,
.carousel-indicators > li.active{
    width: 100px;
    height: 25px;
    border-radius: 0;
    border: solid 1px grey;
    background: lightgrey;
    text-indent: 0;
}
.carousel-indicators > li.active {
    background: white;
}

Working Demo in Fiddle

---

You could even wrap the entire bit of CSS inside of a media query so that when screen size became limited, you defaulted back to the dots instead of awkwardly stacking the list items:

@media screen and (min-width: 550px) {
    /* Wrap CSS Here */
}

Responsive Demo in Fiddle