Bootstrap `Breadcrumbs`

Breadcrumbs are a method of displaying the hierarchy information of a website. Taking a blog as an example, breadcrumbs can show the publication date, category, or tags. They indicate the current page's position within the navigation hierarchy.

In Bootstrap, breadcrumbs are a simple unordered list with the .breadcrumb class. The separators are automatically added through the following class in CSS (bootstrap.min.css):

.breadcrumb > li + li:before {
    color: #CCCCCC;
    content: "/ ";
    padding: 0 5px;
}

The following example demonstrates breadcrumbs:

Example

<ul class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">2013</a></li>
    <li class="active">November</li>
</ul>

The result is as follows:

❮ Home Bootstrap V2 Icons ❯