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?
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:
@breadcrumb-active-color
varaible with the value that you need i.e. #000
.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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With