Change arrow colors in Bootstraps carousel

Inspecting and redefining controls

To make the carousel arrows more visible or fit your site's theme, you may want to fine-tune their style beyond simply adjusting their color. Here are a few strategies to help you do just that:

• Boost the size of your arrows to improve visibility:

.carousel-control-prev-icon,
.carousel-control-next-icon {
  font-size: 2rem; /* Bigger is better? You decide */
}


• Use the content property to represent your arrows with text or graphics:

.carousel-control-prev-icon {
  content: url('left-arrow.svg'); /* Your arrow. Your style. */
}
.carousel-control-next-icon {
  content: url('right-arrow.svg'); /* Keep 'em symmetrical */
}


• Introduce a contrasting background for the icon:

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: #000; /*  Dress them up for a black-tie event */
  border-radius: 50%;     /* Smooth the edges, yeah just like that */
  padding: .5rem;         /* Give them some personal space! */
}


Fine-tuning the colors

You can achieve an even higher level of adaptability by making use of SVG images for your carousel controls. Using the fill attribute, you can designate an exact color hex code:

.carousel-control-prev-icon {
  background-image: url('data:image/svg+xml;utf8,<svg ...><path fill="%23FF0000" .../></svg>');
  /* A touch of red increases the heart rate. Maybe don't use it in a meditation app? */ 
}
.carousel-control-next-icon {
  background-image: url('data:image/svg+xml;utf8,<svg ...><path fill="%23FF0000" .../></svg>');
  /* Seeing double? No, it's just your symmetrical design principles at work. */
}


Replace %23FF0000 with the hex color code of your choice.

Adding Font Awesome icons

If you're looking to swap out the default arrows with something more stylish, then Font Awesome icons are an excellent choice:

<a class="carousel-control-prev" href="#yourCarousel" role="button" data-slide="prev">
  <span class="fa fa-angle-left" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#yourCarousel" role="button" data-slide="next">
  <span class="fa fa-angle-right" aria-hidden="true"></span>
</a>


You can then apply custom color and sizing to the .fa class with CSS:

.fa-angle-left,
.fa-angle-right {
  color: #FF5733; /* Again with the heart rate! */
  font-size: 2rem; /* They're not size 2 shoes, but they're just as important */
}


Climax: Adaptive considerations

For sites with contrasting backgrounds, Bootstrap 5's .carousel-dark class provides subtle yet effective automatic adjustments:

<div id="yourCarousel" class="carousel slide carousel-dark" data-ride="carousel">


However, ensure the arrows are visible across all carousel items. A few minutes of extra testing here can save your users loads of frustration down the road.