CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Anil Simon
Anil Simon

Reputation: 121

bootstrap carousel indicators custom class addition

I am trying to add custom class for bootstrap carousel since i want the changes to the carousel indicators to reflect only at one point of the application

This is my code

HTML:

<ol class="carousel-indicators custom">
<li data-target="#myCarousel" data-slide-to="0" class="active "></li>
<li data-target="#myCarousel" data-slide-to="1" class=""></li>
<li data-target="#myCarousel" data-slide-to="2" class=""></li>
</ol>

CSS:

.custom .carousel-indicators .active {
    background:green !important;
}
.custom .carousel-indicators li {
    border:2px solid black !important;
}

But i am not able to see any of my changes in the carousel indicators. Please provide me the correct code

Upvotes: 1

Views: 311

Answers (1)

Turnip
Turnip

Reputation: 36642

Remove the space between .custom and .carousel-indicators.

The space signifies that .carousel-indicators is a descendant of .custom when in fact they are the same element.

.custom.carousel-indicators .active {
  background: green !important;
}

.custom.carousel-indicators li {
  border: 2px solid black !important;
}
<ol class="carousel-indicators custom">
  <li data-target="#myCarousel" data-slide-to="0" class="active "></li>
  <li data-target="#myCarousel" data-slide-to="1" class=""></li>
  <li data-target="#myCarousel" data-slide-to="2" class=""></li>
</ol>

Upvotes: 1

Related Questions