Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Bootstrap 4 documentation
Background Color

For changing background of breadcrumb, use contextual classes (e.g, .breadcrumb-primary).

                                                        
<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-text-light breadcrumb-primary text-white">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
</nav>
<!--End of Breadcrumb-->
<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-text-light breadcrumb-secondary text-white">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
</nav>
<!--End of Breadcrumb-->
<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-text-light breadcrumb-tertiary text-white">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
</nav>
<!--End of Breadcrumb-->
<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-text-light breadcrumb-info text-white">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
</nav>
<!--End of Breadcrumb-->
<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-text-light breadcrumb-warning text-white">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
</nav>
<!--End of Breadcrumb-->
<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-text-light breadcrumb-danger text-white">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
</nav>
<!--End of Breadcrumb-->
<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-text-light breadcrumb-dark text-white">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
</nav>
<!--End of Breadcrumb-->
<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-text-light breadcrumb-gray text-white">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
</nav>
<!--End of Breadcrumb-->
<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-text-light breadcrumb-light text-white">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
</nav>
<!--End of Breadcrumb-->
Transparent
                                                        
<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-transparent">
        <li class="breadcrumb-item active" aria-current="page">Home</li>
    </ol>
</nav>
<!--End of Breadcrumb-->
<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-transparent">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">Library</li>
    </ol>
</nav>
<!--End of Breadcrumb-->
<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-transparent">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
</nav>
<!--End of Breadcrumb-->
<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-primary breadcrumb-transparent">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
</nav>
<!--End of Breadcrumb-->
<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-secondary breadcrumb-transparent">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
</nav>
<!--End of Breadcrumb-->
<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-tertiary breadcrumb-transparent">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
</nav>
<!--End of Breadcrumb-->
<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-info breadcrumb-transparent">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
</nav>
<!--End of Breadcrumb-->
<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-warning breadcrumb-transparent">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
</nav>
<!--End of Breadcrumb-->
<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-danger breadcrumb-transparent">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
</nav>
<!--End of Breadcrumb-->
<!--Breadcrumb-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
</nav>
<!--End of Breadcrumb-->
Changing the separator

Separators are automatically added in CSS through ::before and content. They can be changed by changing $breadcrumb-divider. The quote function is needed to generate the quotes around a string, so if you want > as separator, you can use this:

                                    
$breadcrumb-divider: quote(">");

It’s also possible to use a base64 embedded SVG icon:

                                    
$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcalign-middlejAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);

It’s also possible to use a FontAwesome icon.

Go to breadcrumbs.scss file and you will see this:

                                    
.breadcrumb-item{
    + .breadcrumb-item{
        &:before{
        content: "\f101";
        font-family: $font-awesome-5;
        font-weight: 900;
        font-size: .625rem;
        color: $breadcrumb-divider-color;
        }
    }
}