Change Bootstrap 4 Carousel Control Colors

Question

I am using a white background for a Carousel using Bootstrap 4.0 and would like to change the color of the controls. It seems that bootstrap now uses SVG for their carousel icons. This means altering the attributes directly does not work.

I am currently using Font Awesome for other elements on the site as well, so if there is a way to use fa-chevrons and format those instead, and it will still behave the same regarding resizing and formatting, that could be an effective solution as well.

Here is my current code for the control elements:

<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
</a>

I found a similar question here but was not able to make sense of the answer provided there.

I also found this page on GitHub but was not able to make any of the answers there work for me either.

What's the difference between fa-chevrons and the default Bootstrap controls? I don't see any substantial difference. — WebDevBooster, Mar 20 '18 at 18:15
well visually its the same, however with the fa-chevrons i could in theory change the color directly. Since bootstrap controls use SVG, i could not alter the color directly using css. I am unsure if there is an easy and reliable way to replace the bootstrap controls with the fa-chevrons without altering some hidden behavior, since I do not have much experience with bootstrap. — Ben Kramer, Mar 20 '18 at 18:28

WebDevBooster · Accepted Answer · 2018-03-20T19:24:55.280

There's no need for any unnecessary css hacks.

If you want to modify any Bootstrap css (or the carousel control colors in particular), you can easily do that.

Here are the rules that control the color of the carousel controls:

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' 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");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' 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");
}

Replace the fff in the fill='%23fff' parts with the hex code of the desired color.

Here's a working code snippet where fill='%23fff' has been replaced with fill='%23f00' for red instead of white:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    
<style>
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' 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");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' 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");
}
</style>

<div class="container">
    <div class="row">
        <div class="col">
            <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img class="d-block w-100" src="https://placeimg.com/800/400/animals" alt="First slide">
                    </div>
                    <div class="carousel-item">
                        <img class="d-block w-100" src="https://placeimg.com/800/400/arch" alt="Second slide">
                    </div>
                    <div class="carousel-item">
                        <img class="d-block w-100" src="https://placeimg.com/800/400/nature" alt="Third slide">
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></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"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
</div>

I've tried placing your code into my custom css and modifying the color to #ccc. When that failed I included !important to give it priority. In the inspector, the color shows as #ccc, however in bootstrap 4 carousel, those indicators do not change color with the color variable. As I learned from the linked sources, this is due to the change to SVG for these icons. That said I appreciate your feedback. Thank you — Ben Kramer, Mar 20 '18 at 19:02
Just updated my answer with a working code snippet. I was wrong in my initial answer. — WebDevBooster, Mar 20 '18 at 19:25
It is working now thanks! In addition to your answer I needed to add !important to each background-image in my stylesheet. otherwise the value is overwritten from the imported stylesheet — Ben Kramer, Mar 20 '18 at 20:09
Why doesn't `background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%6db3b7' 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") !important;` make it blue? Your answer worked fine. — Rick, Jan 16 '20 at 18:52
@Rick Sorry for the late reply. The reason it fails in your example is because you need to have that `%23` bit before the hexadecimal value of the color within the `fill='__'` part. `%23` is the URI encoded hashtag (#) and needs to be there in a hexadecimal color value i.e. if the hexadecimal value of your color is `#6db3b7`, then the URI encoded value of that is `%236db3b7`. So, if you changed `fill='%6db3b7'` to `fill='%236db3b7'`, it should work as expected. More info about URI encoding/decoding: https://en.wikipedia.org/wiki/Percent-encoding and https://www.url-encode-decode.com — WebDevBooster, Oct 20 '20 at 19:21

score 7 · Answer 2 · answered Aug 15 '19 at 09:00

Just insert your own icon inside the carousel-control-next & carousel-control-prev class. For example, I want to change the prev & next icon with Font-Awesome icons. I can do this:

<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
  <!-- INSERT MY OWN PREV ICON USING FONT AWESOME  -->
  <i style="font-size: 60px" class="fas fa-arrow-alt-circle-left"></i>
  <span class="sr-only">Previous</span>
</a>

<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
  <!-- INSERT MY OWN NEXT ICON USING FONT AWESOME  -->
  <i style="font-size: 60px" class="fas fa-arrow-alt-circle-right"></i>
  <span class="sr-only">Next</span>
</a>

Hope it solve your problem

Change Bootstrap 4 Carousel Control Colors

2 Answers2

Linked