asked on

bootstrap css color change

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

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.

http://wallstreet-forecaster.com/infiniteprofits/

Pankaj Jangir

To change the black border update this code:

.carousel-indicators li {border: 1px solid #fff;}
to
.carousel-indicators li {border: 1px solid #000;}

to fill the non-active indicators use: background-color:#000

To fill active indicator as white use: background-color:#fff

rrhandle8

ASKER

I am sorry, but that made no difference at all.

  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
.carousel-indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #ffffff;
  border: 1px solid #000000;
  border-radius: 10px;
}

.carousel-indicators .active {
  width: 12px;
  height: 12px;
  margin: 0;
  background-color: #000000;
  color: #000000;
}
  </style>

Open in new window

Pankaj Jangir

Update to this one:

 <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
.carousel-indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #ffffff;
  border: 1px solid #000000;
  border-radius: 10px;
}

.carousel-indicators .active {
  width: 12px;
  height: 12px;
  margin: 0;
  background-color: #000000;
  color: #fff;
}
  </style>

Open in new window

rrhandle8

ASKER

No change at all.

rrhandle8

ASKER

This is the code in Bootstrap.css

.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 15;
  width: 60%;
  padding-left: 0;
  margin-left: -30%;
  text-align: center;
  list-style: none;
}

.carousel-indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #000 \9;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #000000;
  border-radius: 10px;
}

.carousel-indicators .active {
  width: 12px;
  height: 12px;
  margin: 0;
  background-color: #ffffff;
}

Open in new window

Pankaj Jangir

Can you show me live example so I can show you directly?

rrhandle8

ASKER

http://infiniteprofits.us/

ASKER CERTIFIED SOLUTION

Pankaj Jangir

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial