Search code examples
htmlcsstwitter-bootstrapbreadcrumbs

'breadcrumb-item active' class not working as expected

As per the bootstrap documentation listed here about the use of breadcrumbs, I am trying to indicate an active breadcrumb-item as such:

<ol class="breadcrumb"> <li class="breadcrumb-item active"><a href="#">Home Page</a></li> </ol>

But the item doesn't seem to change to the grayed out color in the documentation example--nothing changes at all! What is wrong with this code and/or what else could be preventing this from working

Solution

  • You have to remove the a tag from the breadcrumb you wish to gray out.

    for example;

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">First Page</a></li>
  <li class="breadcrumb-item active">Home Page</li>
</ol>