How do I change the color of the carousel control icons. I have a white background in my project. The controls are not visible because of the white background. I need help on how to color the controls or rather change the arrows to text like “prev” and “next”.
Hello Mikinaldo.
In Bootstrap, you define elements by their class
. So, you can use the class selector in CSS to change any values your heart could desire.
For more information on Bootstrap: w3schools
Hope this helps.
They are SVG and it seems like you have to overwrite the fill on the background-image url.
Example, fill set to red:
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='red' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='red' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
If you just need them to be dark you can also invert them using filter:
.carousel-control-next-icon,
.carousel-control-prev-icon {
filter: invert(1);
}
If you want to have the words instead, you can hide the background-image and just write something inside the span.
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true">Previous</span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true">Next</span>
<span class="sr-only">Next</span>
</a>
.carousel-control-next-icon,
.carousel-control-prev-icon {
background-image: none;
color: red;
font-size: 20px;
}
2 Likes