LOADING

Getting Started

Introduction Source and Credits

Foundation

Support Changelog

Components

Alerts Badge Breadcrumb Buttons New Button group Card Carousel Collapse Dropdowns Hot Forms Jumbotron List group Media object Modal Navigations Pagination PopoversProgress Scrollspy Spinners Hot Tooltips

Section

Pages

Breadcrumb

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

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item "><a href="#" class="text-gray">Home</a></li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-secondary">
<li class="breadcrumb-item text-white"><a href="#" class="text-white">Home</a></li>
<li><i class="far fa-hand-point-right beadcrum-icon text-white mx-2"></i></li>
<li class="breadcrumb-item active text-white" aria-current="page"><a href="#" class="text-light">Library</a></li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-dark">
<li class="breadcrumb-item"><a href="#" class="text-light">Home</a></li>
<li><i class="far fa-hand-point-right beadcrum-icon text-white mx-2"></i></li>
<li class="breadcrumb-item active text-white" aria-current="page"><a href="#" class="text-light">Library</a></li>
<li><i class="far fa-hand-point-right beadcrum-icon text-white mx-2"></i></li>
<li class="breadcrumb-item active text-white" aria-current="page"><a href="#" class="text-light">Date</a></li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-danger">
<li class="breadcrumb-item"><a href="#" class="text-light">Home</a></li>
<li><i class="far fa-hand-point-right beadcrum-icon text-white mx-2"></i></li>
<li class="breadcrumb-item active text-white" aria-current="page"><a href="#" class="text-light">Library</a></li>
<li><i class="far fa-hand-point-right beadcrum-icon text-white mx-2"></i></li>
<li class="breadcrumb-item active text-white" aria-current="page"><a href="#" class="text-light">Date</a></li>
</ol>
</nav>

Animated Breadcrumb

<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-dark login-box-top">
<li class="breadcrumb-item"><a href="#" class="text-light">Home</a></li>
<li><i class="far fa-hand-point-right beadcrum-icon text-white mx-2"></i></li>           <li class="breadcrumb-item active text-white" aria-current="page"><a href="#" class="text-light">Library</a></li>
<li><i class="far fa-hand-point-right beadcrum-icon text-white mx-2"></i></li>
<li class="breadcrumb-item active text-white" aria-current="page"><a href="#" class="text-light">Date</a></li>
</ol>
</nav>

Gradient Breadcrumb

<nav aria-label="breadcrumb">
<ol class="breadcrumb alert-primary-gradient">
<li class="breadcrumb-item"><a href="#" class="text-white">Home</a></li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-secondary alert-secondary-gradient">
<li class="breadcrumb-item text-white"><a href="#" class="text-white">Home</a></li>
<li><i class="far fa-hand-point-right beadcrum-icon text-white mx-2"></i></li>
<li class="breadcrumb-item active text-white" aria-current="page"><a href="#" class="text-light">Library</a></li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-dark alert-dark-gradient">
<li class="breadcrumb-item"><a href="#" class="text-light">Home</a></li>
<li><i class="far fa-hand-point-right beadcrum-icon text-white mx-2"></i></li>
<li class="breadcrumb-item active text-white" aria-current="page"><a href="#" class="text-light">Library</a></li>
<li><i class="far fa-hand-point-right beadcrum-icon text-white mx-2"></i></li>
<li class="breadcrumb-item active text-white" aria-current="page"><a href="#" class="text-light">Date</a></li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-danger alert-danger-gradient">
<li class="breadcrumb-item"><a href="#" class="text-light">Home</a></li>
<li><i class="far fa-hand-point-right beadcrum-icon text-white mx-2"></i></li>
<li class="breadcrumb-item active text-white" aria-current="page"><a href="#" class="text-light">Library</a></li>
<li><i class="far fa-hand-point-right beadcrum-icon text-white mx-2"></i></li>
<li class="breadcrumb-item active text-white" aria-current="page"><a href="#" class="text-light">Date</a></li>
</ol>
</nav> 
<nav aria-label="breadcrumb">
<ol class="breadcrumb justify-content-center">
<li class="breadcrumb-item"><a href="#" class="text-gray">Home</a></li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-secondary justify-content-center">
<li class="breadcrumb-item"><a href="#" class="text-light">Home</a></li>
<li><i class="far fa-hand-point-right beadcrum-icon text-white mx-2"></i></li>
<li class="breadcrumb-item active text-white" aria-current="page"><a href="#" class="text-light">Library</a></li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-dark justify-content-center">
<li class="breadcrumb-item"><a href="#" class="text-white">Home</a></li>
<li><i class="far fa-hand-point-right beadcrum-icon text-white mx-2"></i></li>
<li class="breadcrumb-item active text-white" aria-current="page"><a href="#" class="text-light">Library</a></li>
<li><i class="far fa-hand-point-right beadcrum-icon text-white mx-2"></i></li>
<li class="breadcrumb-item active text-white" aria-current="page"><a href="#" class="text-light">date</a></li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-danger justify-content-center">
<li class="breadcrumb-item"><a href="#" class="text-light">Home</a></li>
<li><i class="far fa-hand-point-right beadcrum-icon text-white mx-2"></i></li>
<li class="breadcrumb-item active text-white" aria-current="page"><a href="#" class="text-light">Library</a></li>
<li><i class="far fa-hand-point-right beadcrum-icon text-white mx-2"></i></li>
<li class="breadcrumb-item active text-white" aria-current="page"><a href="#" class="text-light">Date</a></li>
</ol>
</nav>
 
<nav aria-label="breadcrumb">
<ol class="breadcrumb justify-content-end">
<li class="breadcrumb-item"><a href="#" class="text-gray">Home</a></li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-secondary justify-content-end">
<li class="breadcrumb-item"><a href="#" class="text-light">Home</a></li>
<li><i class="far fa-hand-point-right beadcrum-icon text-white mx-2"></i></li>
<li class="breadcrumb-item active text-white" aria-current="page"><a href="#" class="text-light">Library</a></li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-dark justify-content-end">
<li class="breadcrumb-item"><a href="#" class="text-light">Home</a></li>
<li><i class="far fa-hand-point-right beadcrum-icon text-white mx-2"></i></li>
<li class="breadcrumb-item active text-white" aria-current="page"><a href="#" class="text-light">Library</a></li>
<li><i class="far fa-hand-point-right beadcrum-icon text-white mx-2"></i></li>
<li class="breadcrumb-item active text-white" aria-current="page"><a href="#" class="text-light">Date</a></li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-danger justify-content-end">
<li class="breadcrumb-item"><a href="#" class="text-light">Home</a></li>
<li><i class="far fa-hand-point-right beadcrum-icon text-white mx-2"></i></li>
<li class="breadcrumb-item active text-white" aria-current="page"><a href="#" class="text-light">Library</a></li>
<li><i class="far fa-hand-point-right beadcrum-icon text-white mx-2"></i></li>
<li class="breadcrumb-item active text-white" aria-current="page"><a href="#" class="text-light">Date</a></li>
</ol>
</nav>