如何更改轮播活动指示器的颜色-Bootstrap

Question

I want to change the carousel active indicator color. Here is the example

http://www.w3schools.com/bootstrap/trybs_theme_band_full.htm#band

I want to change from white to red

Answer 1

The Bootstrap style the controls the carousel active dot is .carousel-indicators .active so:

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

Answer 2

Can change the content of the control links by removing the SVG icon and changing it to a font-awesome icon. The icon can then be styled by adding a class to it. EG

<a class="carousel-control-prev" href="#carouselProfileMedia" role="button" data-slide="prev">
    <i class="fa fa-arrow-circle-left fa-2x your-custom-class" aria-hidden="true"></i>
    <span class="sr-only">Previous</span>
</a>

Answer 3

Try this:

// CSS rule and invert the color, from black to white, using invert() .5 is gray

// we can use sepia() to turn our gray into a brown

// Using saturate() and hue-rotate(), we can fiddle with these values until we arrive at the desired color.

filter: invert(.5) sepia(1) saturate(5) hue-rotate(175deg);