Breadcrumbs

Use breadcrumbs to indicate the navigational hierarchy of the current page

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

<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-gray">
        <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>
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-dark">
        <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>
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-success ">
        <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>
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-info">
        <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>
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-danger">
        <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>

Transparent Breadcrumbs

The following breadcrumbs have a transparent background which can be used for dark backgrounds:

<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-gray breadcrumb-transparent">
        <li class="breadcrumb-item active" aria-current="page">Home</li>
    </ol>
</nav>
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-gray breadcrumb-transparent">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">Library</li>
    </ol>
</nav>
<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-gray 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>