We help IT Professionals succeed at work.
Get Started

bootstrap css color change

rrhandle8 asked
Last Modified: 2017-04-18
I have a website using Bootstrap v3.0.1

I added a carousel I found at https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel2&stacked=h

The sample at w3schools is using the following:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Open in new window

 I did not use the above.
 In the sample, the indicators along the bottom have a white border, and the active one has a fill color of white.
 The goal was to change the all the indicators to have a black border, the non-active indicators to be filled with white (they were transparent) and to fill the active indicator with Black.
 After much experimenting, I found an example of the web that reset the styles for this particular page by adding the following in the style section.
 .carousel-indicators li {
   display: inline-block;
   width: 10px;
   height: 10px;
   margin: 1px;
   text-indent: -999px;
   cursor: pointer;
   background-color: #000 \9;
   background-color: rgba(255, 255, 255, 100);
   border: 1px solid #000000;
   border-radius: 10px;
 .carousel-indicators .active {
   width: 12px;
   height: 12px;
   margin: 0;
   background-color: #333 \59;
   background-color: rgba(255, 0, 0, 50);

Open in new window

This worked to put a black border around all the indicators, and to fill the non-active indicators with the color white, but no luck trying to change the fill color of the active indicator.

As you can see in the link below, the active indicator is an orangish-brown color.  I have no idea where that color is coming from.

Watch Question
Digital Marketer
This problem has been solved!
Unlock 1 Answer and 10 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE