Bootstrap: Change breadcrumb's active text color

12,056

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

Solution 2

You need to apply the CSS to the a within the .active li:

.breadcrumb >.active a{
   color: black;
   text-decoration: none;
}
<ol class="breadcrumb">
     <li class="disabled"><a href="index.html">Home</a></li>
     <li class="active"><a href="#">About us</a></li>
</ol>
Share:
12,056
Theo
Author by

Theo

Beng Honours Degree in Electical in Electronic Engineering,University of Sussex UK MsC in Electrical Power,University of Newcastle Upon Tyne UK. OCJP SE 6 My github account. Android Projects published on google play Easy News. Easy Movies.

Updated on June 12, 2022

Comments

  • Theo
    Theo over 1 year

    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?