Bootstrap: Change breadcrumb's active text color
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:
- Go to Customizing Bootstrap page.
- Move to Breadcrumbs section.
- Override the default value of
@breadcrumb-active-color
varaible with the value that you need i.e.#000
. - 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>
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, 2022Comments
-
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?