Bootstrap carousel controls color

#1

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”.

#2

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.

#3

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;
}
3 Likes
#4