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:

example

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

To answer your question, yes it is *possible*, but you'll have to write some code to do it. What have you tried? — KyleMit, May 07 '14 at 12:03
@KyleMit the question should be: were should I make changes to have such effect. I didn't write any code because I don't know where should I start. I don't want to change bootstrap.js — Piotr Stapp, May 07 '14 at 12:10

KyleMit · Accepted Answer · 2014-05-08T11:38:25.060

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:

demo 1

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

demo 2

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

that was exactly the start point which I needed. It is a really cool trick with div's — Piotr Stapp, May 07 '14 at 12:24
3 hours of fight are over now thanks to your answer! Thank you. — katenoox, Apr 29 '15 at 08:30

Create bootstrap carousel with captions instead of dots

1 Answers1

Here's a typical indicators section:

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

Working Demo in Fiddle

Responsive Demo in Fiddle