Change arrow colors in Bootstraps carousel

Asked 16/9, 2017 at 2:39 Answered 13/4, 2023 at 21:23

Solved html css twitter-bootstrap bootstrap-4 carousel

116

I'm obviously missing something stupidly simple here. I have images with a white background so I want to be able to edit the arrows on the Bootstraps Carousel so they are visible. So many changing the color of the arrows (NOT the background like I've done).

CSS

.carousel-control-prev-icon, .carousel-control-next-icon {
    height: 100px;
    width: 100px;
    outline: black;
    background-color: rgba(0, 0, 0, 0.3);
    background-size: 100%, 100%;
    border-radius: 50%;
    border: 1px solid black;
}

Carousel HTML

<div class = 'col-md-9'>

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

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

        <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
                <img class="d-block img-fluid" src="carousel/Bars%20and%20Dots.jpg" alt="First slide" class = 'img-responsive'>
            </div>

            <div class="carousel-item">
                <img class="d-block img-fluid" src="carousel/murial.jpg" alt="Second slide" class = 'img-responsive'>
            </div>

            <div class="carousel-item">
                <img class="d-block img-fluid" src="carousel/Upper%20Partialism%20album%20covers004white.jpg" alt="Third slide" class = 'img-responsive'>
            </div>
        </div>

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

    </div>

</div>

Edom answered 16/9, 2017 at 2:39 Comment(1)

Can you provide any running example in JSFiddle? – Cattery 16/9, 2017 at 3:10

114

.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 100px;
  width: 100px;
  outline: black;
  background-size: 100%, 100%;
  border-radius: 50%;
  border: 1px solid black;
  background-image: none;
}

.carousel-control-next-icon:after
{
  content: '>';
  font-size: 55px;
  color: red;
}

.carousel-control-prev-icon:after {
  content: '<';
  font-size: 55px;
  color: red;
}

Peccant answered 16/9, 2017 at 5:35 Comment(5)

Sorry for the delayed response. Yes, that seemed to work. Thanks very much! – Edom 18/9, 2017 at 2:29

You're welcome, i hope that you vote my answer, help me a lot, cheers – Peccant 18/9, 2017 at 2:59

Sorry, I'm new to this. Done :) – Edom 18/9, 2017 at 3:2

This changes the style of the page and adds a different style of arrows instead of changing the colour of the existing one. – Uranalysis 10/8, 2018 at 15:32

No - this does not change the color of the default controls.. it adds a element. – Dozer 2/5, 2019 at 2:32

192

I know this is an older post, but it helped me out. I've also found that for bootstrap v4 you can also change the arrow color by overriding the controls like this:

.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") !important;
}

.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") !important;
}

Where you change fill='%23fff' the fff at the end to any hexadecimal value that you want. For example:

fill='%23000' for black, fill='%23ff0000' for red and so on. Just a note, I haven't tested this without the !important declaration.

Skysail answered 27/2, 2018 at 20:56 Comment(1)

This is a great solution, thanks a lot. I suggest adding .carousel parent classes to avoid having to use !important – Eighteenth 12/8, 2020 at 23:42

178

If you just want to make them black in Bootstrap 4+.

.carousel-control-next,
.carousel-control-prev /*, .carousel-indicators */ {
    filter: invert(100%);
}

Matronage answered 18/11, 2018 at 9:25 Comment(4)

Cleaner, easier. I personally hate the BS4 approach to this and their background-image: svg... solution. – Clematis 18/3, 2019 at 21:12

Bootstrap 4.3 the correct class is carousel-control-prev – Fluorescence 17/7, 2019 at 15:0

You can add .carousel-indicators to do the same for the indicators. – Lepley 1/11, 2020 at 20:41

this is like 5 years old and I got it to change to black thanks :) – Swacked 20/5, 2022 at 5:14

114

.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 100px;
  width: 100px;
  outline: black;
  background-size: 100%, 100%;
  border-radius: 50%;
  border: 1px solid black;
  background-image: none;
}

.carousel-control-next-icon:after
{
  content: '>';
  font-size: 55px;
  color: red;
}

.carousel-control-prev-icon:after {
  content: '<';
  font-size: 55px;
  color: red;
}

Peccant answered 16/9, 2017 at 5:35 Comment(5)

Sorry for the delayed response. Yes, that seemed to work. Thanks very much! – Edom 18/9, 2017 at 2:29

You're welcome, i hope that you vote my answer, help me a lot, cheers – Peccant 18/9, 2017 at 2:59

Sorry, I'm new to this. Done :) – Edom 18/9, 2017 at 3:2

This changes the style of the page and adds a different style of arrows instead of changing the colour of the existing one. – Uranalysis 10/8, 2018 at 15:32

No - this does not change the color of the default controls.. it adds a element. – Dozer 2/5, 2019 at 2:32

You should use also: <span><i class="fa fa-angle-left" aria-hidden="true"></i></span> using fontawesome. You have to overwrite the original code. Do the following and you'll be free to customize on CSS:

<a class="carousel-control-prev" href="#carouselExampleIndicatorsTestim" role="button" data-slide="prev">
    <span><i class="fa fa-angle-left" aria-hidden="true"></i></span>
    <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicatorsTestim" role="button" data-slide="next">
    <span><i class="fa fa-angle-right" aria-hidden="true"></i></span>
    <span class="sr-only">Next</span>
 </a>

The original code

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

Remit answered 12/6, 2018 at 17:51 Comment(2)

While the other answers work just fine, this makes a lot more sense and is easier to work with. Thanks for chiming in! – Loverly 25/6, 2020 at 17:8

This does'nt work in angular. – Ur 8/8, 2023 at 17:37

Add .carousel-dark to the .carousel for darker controls, indicators, and captions.

Bootstrap 5 documentation

Verlinevermeer answered 18/9, 2021 at 0:5 Comment(0)

Currently Bootstrap 4 uses a background-image with embbed SVG data info that include the color of the SVG shape. Something like:

.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"); }

Note the part about fill='%23fff' it fills the shape with a color, in this case #fff (white), for red simply replace with #f00

Finally, it is safe to include this (same change for next-icon):

.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"); }

Marroquin answered 11/8, 2018 at 1:47 Comment(0)

a little example that works for me

    .carousel-control-prev,
    .carousel-control-next{
        height: 50px;
        width: 50px;
        outline: $color-white;
        background-size: 100%, 100%;
        border-radius: 50%;
        border: 1px solid $color-white;
        background-color: $color-white;
    }

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

Wampum answered 8/10, 2018 at 9:3 Comment(0)

In bootstrap 4 if you are just changing the colour of the controls you can use the sass variables, typically in custom.scss:

$carousel-control-color: #7b277d;

As highlighted in this github issue note: https://github.com/twbs/bootstrap/issues/21985#issuecomment-281402443

Gelatinoid answered 30/8, 2018 at 19:2 Comment(0)

This worked for me:

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

I changed the color in the url of the icon. Thats the original that is used in the bootstrap page but with this section in black:

"...fill='%23000'..."

Laparotomy answered 27/7, 2020 at 18:3 Comment(1)

You can also use it with specific color like this: fill='darkorange' supported colors by svg are here - december.com/html/spec/colorsvg.html – Sosa 15/4, 2021 at 13:12

for bootstrap-3 one can use:

.carousel-control span.glyphicon {
    color: red;
}

Hilliard answered 16/9, 2017 at 6:6 Comment(2)

Thanks for the suggestion, but I'm using Bootstrap 4. – Edom 18/9, 2017 at 2:26

I am on Boostrap 3, thx Keshav, you pointed me in the right direction, but had to write in css: .carousel-control span.icon-prev, span.icon-next { color: red; } – Malamute 24/11, 2019 at 12:59

If you are using bootstrap.min.css for carousel-

<a class="left carousel-control" href="#carouselExample" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carouselExample" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>
  <span class="sr-only">Next</span>
</a>

Open the bootstrap.min.css file and find the property "glyphicon-chevron-right" and add the property "color:red"

Oro answered 23/3, 2018 at 6:1 Comment(0)

I too had a similar problem, some images were very light and some dark, so the arrows didn't always show up clearly so I took a more simplistic approach.

In the modal-body section I just removed the following lines:

    <!-- Left and right controls -->
    <a class="carousel-control-prev" href="#id" data-slide="prev">
       <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#id" data-slide="next">
      <span class="carousel-control-next-icon"></span>
    </a>

and inserted the following into the modal-header section

    <!-- Left and right controls -->
    <a  href="#gamespandp" data-slide="prev" class="btn btn-outline-secondary btn-sm">&#10094;</a>
    <a  href="#gamespandp"  data-slide="next" class="btn btn-outline-secondary btn-sm">&#10095;</a>

The indicators can now be clearly seen, no adding extra icons or messing with style sheets, although you could style them however you wanted!

See this demo image:

[ demo Image]

Avocation answered 2/2, 2020 at 15:11 Comment(3)

This does not answer the original question at all. – Theis 12/6, 2020 at 11:44

How does my reply not answer the original question MrBacktofront? "I have images with a white background so I want to be able to edit the arrows on the Bootstraps Carousel so they are visible" My solution edits the arrows and makes them visible regardless of the images. – Avocation 13/6, 2020 at 12:16

Since the question had already been correctly answered, clearly my answer was an alternative solution that allows users to navigate regardless of any colour clashes. As to aesthetics, I did clearly state that one could style them however one wanted to, maybe your eyes were so badly affected by the grotesque hideousness of HTML entities that they failed to read that part! As with regards to being down voted, since you seem to be the only one with a problem, I'll let it stand. – Avocation 15/6, 2020 at 15:49

To change the color you should add the style to your css file and made a little change in fill attribute in svg code uses as background-image for classes .carousel-control-prev-icon and .carousel-control-next-icon

fill='%23fff' change only fff to color you need for example f00 for red. (it's possible to use 6letters hex also --> %23ff0000)

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

for juniors: .carousel-container .carousel .carousel-control-next .carousel-control-next-icon

Haskel answered 9/6, 2021 at 14:26 Comment(1)

Your answer was so clear and the correct one with just little change. – Furthermore 28/12, 2022 at 13:35

With CSS, it's possible to customize icon color on fill parameter to use on control classes and icon classes. And adding a class hover alpha to background:

.carousel-control-prev-icon {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000000' 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");}
.carousel-control-next-icon {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000000' 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");}
<--! alpha background -->
.carousel-control-next:hover, .carousel-control-prev:hover {
background-color:rgba(0, 0, 0, 0);}

Scherle answered 13/4, 2023 at 21:23 Comment(0)

To customize the colors for the carousel controls, captions, and indicators using Sass you can include these variables

    $carousel-control-color: 
    $carousel-caption-color: 
    $carousel-indicator-active-bg:

Warner answered 21/2, 2020 at 17:41 Comment(1)

It worked for me, except the variable $carousel-indicator-active-bg didn't work – Barriebarrientos 3/3, 2020 at 1:53

To swap them for font awesome with pure CSS:

.carousel-control-prev-icon, .carousel-control-next-icon {
  background-image: none;
}

.carousel-control-prev-icon:after, .carousel-control-next-icon:after {     
  content: "\f053";
  font-family: 'Font Awesome 5 Free', sans-serif;
}

.carousel-control-next-icon:after {
  content: "\f054";
}

Clematis answered 29/9, 2022 at 19:10 Comment(1)

Your're right. We should set background-image:none; and then define new object for it by :agter and :before – Furthermore 28/12, 2022 at 13:31

-1

With Font Awesome icons:

<!-- Controls -->
<a class="carousel-control-prev" href="#carousel-example-generic" role="button" data-slide="prev">
  <span class="fa fa-chevron-left fa-lg" style="color:red;"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example-generic" role="button" data-slide="next">
  <span class="fa fa-chevron-right fa-lg" style="color:red;"></span>
  <span class="sr-only">Next</span>
</a>

Octillion answered 6/8, 2019 at 15:36 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags