Change Color of Svg Background-Image (Bootstrap 4 Carousel)

Change Bootstrap 4 Carousel Control Colors

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>

Change arrow colors in Bootstraps carousel

I hope this works, cheers.

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

How to Change the color of carousel icon boostrap 4

If you the next and prev icon try this:

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

Here we are directly going into the svg file, and then we change the fill color

Carousel Bootstrap - how to change the color of the arrows?

I have made code snippets that change the color of the prevous and next icon indicator. Please run the code snippet and you will see the icon color has changed to red.

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container">  <div class="row">    <div class="col-md-2">    </div>    <div class="col-md-8">      <ngb-carousel id="carousel_1" #carousel="ngbCarousel" class="text-lg-center" #myCarousel="ngbCarousel" showNavigationArrows="true" interval="2500" pauseOnHover="false">        <ng-template ngbSlide *ngFor="let image of images;let i = index" id="{{i}}">          <div class="picsum-img-wrapper">            <img [src]="image" alt="Random first slide" style=" max-height:300px; margin:0 auto;">          </div>          <div class="carousel-caption">            <h6>{{titles[i]}}</h6>          </div>          <a class="carousel-control-prev" href="#carousel_1" data-slide="prev">            <span class="carousel-control-prev-icon"></span>          </a>          <a class="carousel-control-next" href="#carousel_1" data-slide="next">            <span class="carousel-control-next-icon"></span>          </a>        </ng-template>      </ngb-carousel>    </div>    <div class="col-md-2">    </div>  </div></div>

Bootstrap change arrow color

What you are looking for is

fill='%23000'

Try this

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

The fill attribute is the one responsible for changing the color.

The "%23" here is just the "#" symbol. It needs to be URL-encoded when used in a Data URI.

Hope this helped.

Carousel Background colour

Answer to original question: find

<rect width="100%" height="100%" fill="777"/> 

and replace it with

<rect width="100%" height="100%" fill="white"/>

To set colour of buttons as per comment

button.carousel-control-prev,
button.carousel-control-next {
  background-color :white !important;
  color:black;
  opacity: 1;
}

.carousel-control-prev-icon {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000' %3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000' %3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
 }
 
 

How to change customized carousel indicator background color?

Probably the easiest way to do this without Javascript is to modify your markup to use the standard classes. Then you can just use the active class that gets automatically appended to the immediate child elements of the element with the .carousel-indicators class.

DEMO without Javascript

In the demo, I override the standard Bootstrap CSS and take advantage of the active class that is appended to the .carousel-indicators child elements by the bootstrap.js via some custom css:

.carousel-indicators li {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin: 10px;
    text-indent: 0;
    cursor: pointer;
    border: none;
    border-radius: 50%;
    background-color: #0000ff;
    box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.5);    
}
.carousel-indicators .active {
    width: 48px;
    height: 48px;
    margin: 10px;
    background-color: #ffff99;
}

If you can rework your content into the standard classes, you can always overwrite the css or customize it with LESS. You didn't post your custom css or indicate if you're using a version of Bootstrap 2 or 3 so, I couldn't provide more on point example. The markup in the demo is using version 3.2.0.

You can also do this with Javascript via the carousel events. Again, this example is based on Bootstrap 3.2.0. It will not work with version 2, as the event names changed.

DEMO using Javascript

In this example, you listen for the slid.bs.carousel event. This fires as soon as the carousel is about to slide, so to get the next active slide, you have to use the event.relatedTarget. Then to find the corresponding indicator, you can use the index of the next active slide to get the carousel indicator with the matching value in the data-slide-to attribute.

//Make sure to change the id to your carousel id
$('#carousel-example-generic').on('slid.bs.carousel', function (event) {
    var nextactiveslide = $(event.relatedTarget).index();
    var $btns = $('.carousel-buttons');
    var $active = $btns.find("[data-slide-to='" + nextactiveslide + "']");
    $btns.find('.img-circle').removeClass('active');
    $active.find('.img-circle').addClass('active');
});

Can't change the background color on carousel caption with BootStrap4

Because you are providing invalid values for the rgba colour scheme. Having rgba(black,black, black, 0.8); won't really work. Try setting it as: rgba(0, 0, 0); if you want it black.

Here's a link to a css color picker tool, provided by Mozilla.

---

Related Topics