20

How can I restyle my carousel indicators? I have white slides with middle content and the white indicators are not showing up. How can I customize to use a darker color so they show up?

genxgeek
  • 13,109
  • 38
  • 135
  • 217

7 Answers7

44

Overwrite the class .carousel-indicators li in another file, after the Bootstrap CSS bundle. Below I show some snippets for each version of Bootstrap up to the current version (v4).


Bootstrap 2.3.2

.carousel-indicators li {
  background-color: #999;
  background-color: rgba(70, 70, 70, 0.25);
}

.carousel-indicators .active {
  background-color: #444;
}

CodePen for Bootstrap v2.3.2



Bootstrap 3.4.1 & 4.3.1

The same rule applies to both versions.

/* Add an extra .carousel parent class to increase specificity
   avoiding the use of !important flag. */
.carousel .carousel-indicators li {
  background-color: #fff;
  background-color: rgba(70, 70, 70, 0.25);
}

.carousel .carousel-indicators .active {
  background-color: #444;
}

CodePen for Bootstrap v3.4.1
CodePen for Bootstrap v4.3.1


thiagobraga
  • 1,519
  • 2
  • 15
  • 29
5

don't forget to point !important after styles : 

.carousel-indicators li {
  background-color: #999 !important;
  background-color: rgba(70,70,70,.25) !important;
}

.carousel-indicators .active {
  background-color: #444 !important;
}
Keivan Sabil...
  • 95
  • 2
  • 11
  • 2
    The declaration `!important` is not mandatory and is also a bad practice. See more here: http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css – thiagobraga Jan 14 '15 at 02:11
1

I agree with @thiagobraga. Override the bootstrap class .carousel-indicators li class.

If you want to stay with the bootstrap look and feel, they use a border (with a radius) to make their empty circles. So you can just override the border color:

.carousel-indicators li {
    border-color: #777;
}

.carousel-indicators .active {
    background-color: #777;
}
thiagobraga
  • 1,519
  • 2
  • 15
  • 29
mmcfly
  • 834
  • 8
  • 12
1

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

.carousel-indicators li {
    filter: invert(100%);
}

Kudos to Chris Gunawardena for his idea for the techniques for changing the arrow colors.

Paul
  • 6,061
  • 6
  • 39
  • 70
1

Bootstrap 4 uses SVG icons. you may invert its colors

.carousel-control-next-icon, .carousel-control-prev-icon { filter: invert(1); }

enter image description here

Vikas Bansal
  • 10,662
  • 14
  • 58
  • 100
1

I am building my first site and had the same problem - the indicator bars seem to use opacity (50%) to display a colour when not active, so you can't see them on a white background. None of the solutions I found worked for BS 5.3. I finally worked out that the following CSS did the trick:

.illust-carousel .carousel-indicators [data-bs-target] {
  background-color: #000000;
}

The .illust-carousel is the class name I gave to an html <section> that I used to enclose the code from BS (I have two carousels, one with a white- and one with a black- background, so this allowed me to have black and white indicator bars). I am not an expert, but this solved the problem for me.

tdy
  • 36,675
  • 19
  • 86
  • 83
Phillus
  • 11
  • 1
0

Another option to improve the visibility of the light theme icons over white images is to add some kind of background on hover.

This is an example using background: linear-gradient():

.carousel:hover .carousel-control-prev {
    background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}
.carousel:hover .carousel-control-next {
    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<div id="carouselExampleDark" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100 "   xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#f5f5f5"></rect><text x="50%" y="50%" fill="#aaa" dy=".3em">First slide</text></svg>

    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100 "   xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Second slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"></rect><text x="50%" y="50%" fill="#bbb" dy=".3em">Second slide</text></svg>

    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100 "  xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#e5e5e5"></rect><text x="50%" y="50%" fill="#999" dy=".3em">Third slide</text></svg>

    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
solde9
  • 43
  • 1
  • 8