Breadcrumb Basic Styles
Lorem ipsum dolor sit amet, consectetur adipisicing elitUsage
<div class="row align-items-end p-3 mb-3">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
<div class="d-inline">
<h5>Breadcrumb Basic Styles</h5>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</span>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
<nav aria-label="breadcrumb">
<ol class="breadcrumb float-right">
<li class="breadcrumb-item"><a href="#"><i class="feather icon-home"></i></a></li>
<li class="breadcrumb-item"><a href="#">Breadcrumb</a></li>
<li class="breadcrumb-item active" aria-current="page">Example Breadcrumb</li>
</ol>
</nav>
</div>
</div>
Breadcrumb Basic With White Background Color
Lorem ipsum dolor sit amet, consectetur adipisicing elitBottom Breadcrumb
Lorem ipsum dolor sit amet, consectetur adipisicing elitWithout Icon Breadcrumb
Lorem ipsum dolor sit amet, consectetur adipisicing elitIcon Breadcrumb
Lorem ipsum dolor sit amet, consectetur adipisicing elitColor Icon Breadcrumb
Lorem ipsum dolor sit amet, consectetur adipisicing elitUsage
<div class="row bg-white p-3 mb-3">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
<div class="d-inline">
<div class="text-center left-icon-breadcrumb text-info">
<i class="fa fa-home"></i>
</div>
<h5>Color Icon Breadcrumb</h5>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</span>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
<nav aria-label="breadcrumb">
<ol class="breadcrumb float-right">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Breadcrumb</a></li>
<li class="breadcrumb-item active" aria-current="page">Example Breadcrumb</li>
</ol>
</nav>
</div>
</div>
Colored Breadcrumb
Default Color Breadcrumb
Lorem ipsum dolor sit amet, consectetur adipisicing elitUsage
For Colored Breadcrumb just use .bg-default, .bg-danger e.t.c
<h4>Colored Breadcrumb</h4>
<div class="row bg-default p-3 mb-3">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
<div class="d-inline">
<h5>Default Color Breadcrumb</h5>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</span>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
<nav aria-label="breadcrumb">
<ol class="breadcrumb float-right">
<li class="breadcrumb-item"><a href="#"><i class="feather icon-home"></i></a></li>
<li class="breadcrumb-item"><a href="#">Breadcrumb</a></li>
<li class="breadcrumb-item active" aria-current="page">Example Breadcrumb</li>
</ol>
</nav>
</div>
</div>