CODEWITHSUNDEEP
htmlcss
ekxz900
ekxz900

Reputation: 117

Inline styling of bootstrap-carousel active indicator

I'm trying to change the color of the active indicator for bootstrap-carousel. This is my code currently (without the active indicator styling)

<ol class="carousel-indicators">
    <li class="active" data-target="#DemoCarousel" style="background-color:#cccccc; border-radius: 2px 2px 2px 2px; border-color: transparent; height: 3px; width: 15px;">&nbsp;</li>
    <li data-target="#DemoCarousel" style="background-color:#cccccc; border-radius: 2px 2px 2px 2px; border-color: transparent; height: 3px; width: 15px;">&nbsp;</li>
    <li data-target="#DemoCarousel" style="background-color:#cccccc; border-radius: 2px 2px 2px 2px; border-color: transparent; height: 3px; width: 15px;">&nbsp;</li>
</ol>

Is there any way I can style the active indicator inline?

Upvotes: 1

Views: 478

Answers (1)

patelarpan
patelarpan

Reputation: 8001

No, you can not because inline style overrides another style. if you want style active indicator then you can do something like this.

 li.active {
     background-color:red !important; 
 }

you need to use !important here. it override your inline style.

But, if you want to style active indicator using inline style. then you can look for a javascript solution.

Upvotes: 1

Related Questions