Create a bootstrap carousel with captions instead of dots

Question

A standard bootstrap carousel may contain points for changing slides (example loading page ).

However, I recently read Why users don’t click on your Carousel homepage , which suggests using captions instead of dots, as shown below:

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

Answer 1

You can do this by simply overriding the styles in the carousel-indicators list carousel-indicators .

Here is a typical indicator 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 want to override some default Bootstrap styles:

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

Then return the text by removing the negative text-indent added by Bootstrap:

Lastly, add your own background and border and style as you like.
The full style 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 a script

---

You could even wrap the entire CSS slice inside the media query so that when you decrease the screen size, by default, you return to the points instead of the inconvenient styling of the list items:

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

Responsive demo in script