Carousel indicators not showing up on white background on slides (custom style or class add)?
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
don't forget to point !important after styles :
.carousel-indicators li {
background-color: #999 !important;
background-color: rgba(70,70,70,.25) !important;
}
.carousel-indicators .active {
background-color: #444 !important;
}