Carousel indicators not showing up on white background on slides (custom style or class add)?

Question

How can I restyle my carousel indicators? I have white slides with middle content and the white indicators are not showing up. How can I customize to use a darker color so they show up?

Answer 1

Overwrite the class .carousel-indicators li in another file, after the Bootstrap CSS bundle. Below I show some snippets for each version of Bootstrap up to the current version (v4).

Bootstrap 2.3.2

.carousel-indicators li {
  background-color: #999;
  background-color: rgba(70, 70, 70, 0.25);
}

.carousel-indicators .active {
  background-color: #444;
}

CodePen for Bootstrap v2.3.2

---

Bootstrap 3.4.1 & 4.3.1

The same rule applies to both versions.

/* Add an extra .carousel parent class to increase specificity
   avoiding the use of !important flag. */
.carousel .carousel-indicators li {
  background-color: #fff;
  background-color: rgba(70, 70, 70, 0.25);
}

.carousel .carousel-indicators .active {
  background-color: #444;
}

CodePen for Bootstrap v3.4.1
CodePen for Bootstrap v4.3.1