Bootstraps Carousel Indicators

Written by Kuligaposten

Bootstraps Carousel Indicators

Make the indicators yellow and the active red

CSS

[data-bs-theme='dark'] .carousel-dark .carousel-indicators [data-bs-target],
[data-bs-theme='dark'] .carousel .carousel-indicators [data-bs-target],
.carousel-dark .carousel-indicators [data-bs-target],
.carousel .carousel-indicators [data-bs-target] {
  background-color: var(--bs-yellow);
  opacity: 1;
}

[data-bs-theme='dark'] .carousel-dark [data-bs-target].active,
[data-bs-theme='dark'] .carousel [data-bs-target].active,
.carousel-dark [data-bs-target].active,
.carousel [data-bs-target].active {
  background-color: var(--bs-red);
}

if you want round indicators

.carousel-indicators [data-bs-target] {
  border-radius: 50%;
  width: 15px;
  height: 15px;
}
Go back