Bootstrap 4 Carousel: How To Change Arrow Colors? [2 Methods]

What is “carousel-control-prev-icon” in Bootstrap, you might ask?

Well, if you have worked with Bootstrap carousels you probably know that this, along with “carousel-control-next-icon”, are the classes used for the small arrow icons of the carousel’s controls.

But what do I need them for, you might continue?

Well, you will need them if you want to change the colors of the arrow icons.

Today in this tutorial we will do just that, with 2 different methods.

Let’s see these 2 methods and in the end, you can download the templates as usual.

Introduction

We will use Bootstrap version 4.5.3 here, and as I said we will see two ways of changing the arrows’ colors which are:

• the SVG method – we will change the fill color of the SVG shape as I did in the Bootstrap lightbox gallery tutorial here;
• the “Font Icons” method – we will use font icons instead of SVG shapes. In this case, I’ve used Font Awesome but you can use any font you prefer.

So let’s begin with the first method.

Method 1: Using SVG shapes

Below you can see a preview image of how our carousel will look like (click on the image to view it full size).

The HTML

Let’s see the HTML code of our carousel (file “index.html”). I will not show the code of the other parts of the page.

<!-- Top content -->
<div class="top-content">

    <!-- Carousel -->
    <div id="carousel-example" class="carousel slide" data-ride="carousel">

        <ol class="carousel-indicators">
            <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example" data-slide-to="1"></li>
            <li data-target="#carousel-example" data-slide-to="2"></li>
            <li data-target="#carousel-example" data-slide-to="3"></li>
        </ol>

        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="assets/img/slides/slide-img-1.jpg" class="d-block w-100" alt="slide-img-1">
                <div class="carousel-caption">
                    <h1>Carousel: Change Arrow Colors</h1>
                    <div class="carousel-caption-description">
                        <p>How to Change the Arrow Colors of Carousel Controls in Bootstrap 4</p>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <img src="assets/img/slides/slide-img-2.jpg" class="d-block w-100" alt="slide-img-2">
                <div class="carousel-caption">
                    <h3>Caption for Image 2</h3>
                    <div class="carousel-caption-description">
                        <p>This is the caption description text for image 2.</p>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <img src="assets/img/slides/slide-img-3.jpg" class="d-block w-100" alt="slide-img-3">
                <div class="carousel-caption">
                    <h3>Caption for Image 3</h3>
                    <div class="carousel-caption-description">
                        <p>This is the caption description text for image 3.</p>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <img src="assets/img/slides/slide-img-4.jpg" class="d-block w-100" alt="slide-img-4">
                <div class="carousel-caption">
                    <h3>Caption for Image 4</h3>
                    <div class="carousel-caption-description">
                        <p>This is the caption description text for image 4.</p>
                    </div>
                </div>
            </div>
        </div>

        <a class="carousel-control-prev" href="#carousel-example" 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="#carousel-example" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    <!-- End carousel -->

</div>

As you can see, we have a simple full-width carousel with images, captions, controls, and indicators, created by following the documentation of the Bootstrap carousel component.

The CSS

Now let’s change the controls’ arrow colors with some CSS code (file “style.css”, folder “/assets/css/”). I’ll show only the relevant parts of the CSS code.

.top-content .carousel-control-prev-icon {
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23c593d8' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}

.top-content .carousel-control-next-icon {
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23c593d8' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}

We have to just change the fill color of the SVG shapes used as background images.

We can do this by changing the fill value here: “fill=’%23c593d8′“. The last 6 digits, in this case “c593d8” are used to specify the color as a hexadecimal number.

I have also increased the size of the arrows so you can better see the color change. I have used a width and height of 40 pixels.

Next, we change the color of the indicators to match the style of the controls’ arrows.

.top-content .carousel-indicators li {
    width: 16px;
    height: 16px;
    margin-left: 5px;
    margin-right: 5px;
    background-color: #c593d8;
    border-radius: 50%;
}

– – – –

Don’t miss: Bootstrap 4 Carousel Fullscreen: How To + Template

Method 2: Using Font Icons

First, the preview image (click on it to view it full size).

The HTML

Here we have a smaller carousel created with the code below. I have used a smaller carousel on purpose, so we have some space to place the controls outside of it, on the left and right.

<!-- Top content -->
<div class="top-content">
    <div class="container">
        <div class="row">
            <div class="col col-md-10 offset-md-1 col-lg-8 offset-lg-2">

                <!-- Carousel -->
                <div id="carousel-example" class="carousel slide" data-ride="carousel">

                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example" data-slide-to="1"></li>
                        <li data-target="#carousel-example" data-slide-to="2"></li>
                        <li data-target="#carousel-example" data-slide-to="3"></li>
                    </ol>

                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="assets/img/slides/slide-img-1.jpg" class="d-block w-100" alt="slide-img-1">
                            <div class="carousel-caption">
                                <h1>Carousel: Change Arrow Colors</h1>
                                <div class="carousel-caption-description">
                                    <p>How to Change the Arrow Colors of Carousel Controls in Bootstrap 4</p>
                                </div>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="assets/img/slides/slide-img-2.jpg" class="d-block w-100" alt="slide-img-2">
                            <div class="carousel-caption">
                                <h3>Caption for Image 2</h3>
                                <div class="carousel-caption-description">
                                    <p>This is the caption description text for image 2.</p>
                                </div>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="assets/img/slides/slide-img-3.jpg" class="d-block w-100" alt="slide-img-3">
                            <div class="carousel-caption">
                                <h3>Caption for Image 3</h3>
                                <div class="carousel-caption-description">
                                    <p>This is the caption description text for image 3.</p>
                                </div>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="assets/img/slides/slide-img-4.jpg" class="d-block w-100" alt="slide-img-4">
                            <div class="carousel-caption">
                                <h3>Caption for Image 4</h3>
                                <div class="carousel-caption-description">
                                    <p>This is the caption description text for image 4.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <a class="carousel-control-prev" href="#carousel-example" role="button" data-slide="prev">
                        <i class="fas fa-arrow-left" aria-hidden="true"></i>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carousel-example" role="button" data-slide="next">
                        <i class="fas fa-arrow-right" aria-hidden="true"></i>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
                <!-- End carousel -->

            </div>
        </div>
    </div>
</div>

It is very similar to the first one. We just use a container, a row, and columns, to make it smaller by following the specifications of the Bootstrap layout and its Grid system.

As already mentioned, we use an Icon Font for the arrows, in this case, Font Awesome.

For example, like this:

<i class="fas fa-arrow-left" aria-hidden="true"></i>

You can see the available icons here.

I have also added “aria-hidden=true” for accessibility.

The CSS

Having our arrow icons outside the image slider, and on a white background, we need to give them a dark color.

We do this very easily with some CSS code, just like we would have done with any “normal” font.

.top-content .carousel-control-prev {
    left: -110px;
    border-bottom: 0;
    font-size: 40px;
    color: #444;
}

.top-content .carousel-control-next {
    right: -110px;
    border-bottom: 0;
    font-size: 40px;
    color: #444;
}

We use a “#444” value for the color and a font-size of 40 pixels.

You can also see how we place the controls outside the carousel by using negative left and right positions.

CSS Media Queries

I have used some CSS Media Queries to adjust the look of the carousel on smaller devices.

I will not show it here, but you can find it in the file “media-queries.css” (folder “/assets/css/”).

Demo, Download and License

VIEW DEMO: METHOD 1 – METHOD 2

DOWNLOAD: Bootstrap Carousel Change Arrow Colors (1971 downloads )

LICENSE:
You can use these templates as you like, in personal or commercial projects. Just do not sell them “as is”.

Conclusion

Sometimes in our day to day development work, we tend to waste time over small things more than we’d like, like changing the colors of some small arrows in Bootstrap projects 😉 .

Hopefully, this quick tutorial will help you avoid that.

Let me know in the comments if you have any questions.