Carousel indicators not showing up on white background on slides (custom style or class add)?

Question

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?

thiagobraga · Accepted Answer · 2020-08-19T20:35:46.147

43

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

edited Aug 19 '20 at 20:35

answered Jul 26 '13 at 04:58

thiagobraga

1,453
2
15
25

5

You can also adjust the outline around the indicator: `border:1px solid #444;` – Chad Kuehn Sep 14 '14 at 03:56
Which version of Bootstrap is this alleged solution for? – sea26.2 May 02 '19 at 02:28
@sea26.2 When I answered this question, Bootstrap was in version 2, if I'm not mistaken. I'll update the answer to include snippets for each version. – thiagobraga May 02 '19 at 12:50

score 5 · Answer 2 · answered Dec 28 '14 at 14:32

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

answered Dec 28 '14 at 14:32

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

score 1 · Answer 3 · edited May 02 '20 at 20:01

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

edited May 02 '20 at 20:01

thiagobraga

1,453
2
15
25

answered May 24 '18 at 16:30

mmcfly

794
7
12

score 1 · Answer 4 · answered Aug 15 '20 at 19:19

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.

answered Aug 15 '20 at 19:19

Paul

4,856
2
30
61

score 1 · Answer 5 · answered Dec 12 '20 at 12:26

1

Bootstrap 4 uses SVG icons. you may invert its colors

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

answered Dec 12 '20 at 12:26

Vikas Bansal

9,584
14
55
90

Carousel indicators not showing up on white background on slides (custom style or class add)?

5 Answers5

Bootstrap 2.3.2

Bootstrap 3.4.1 & 4.3.1