Bootstrap: Change breadcrumb's active text color

Question

I want to make the text color About us of the breadcrumb to black but its not working.

<ol class="breadcrumb">
    <li class="disabled"><a href="index.html">Home</a></li>
    <li class="active"><a href="#">About us</a></li>
</ol>

I tried following CSS but it didn't work.

.breadcrumb > .active {
   color: black;
   text-decoration: none;
}

Any idea why it is not working?

Answer 1

As per Bootstrap's Documentation breadcrumb's active item doesn't contain any link inside.

This is logical as last item shows current active page and it shouldn't be clickable so <a> element is excess here.

Use the standard Bootstrap structure for breadcrumbs i.e.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Here are two possible ways of overriding active text color:

Method #01:

1. Go to Customizing Bootstrap page.
2. Move to Breadcrumbs section.
3. Override the default value of @breadcrumb-active-color varaible with the value that you need i.e. #000.
4. Move to Download section and press "Compile and Download" Button.

---

Method #02:

You will need to override Bootstrap styles in your custom css file.

.breadcrumb >.active {
   color: black;
}

---

However if you still need link inside active item you need to change selector accordingly i.e:

.breadcrumb >.active a {
   color: black;
}

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

.breadcrumb > .active,
.breadcrumb > .active a {
  color: black;
}

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data(Without Link)</li>
</ol>
<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active"><a href="#">Data(With Link)</a></li>
</ol>