Breadcrumb

Default Breadcrumb

You can set breadcrumb using breadcrumb class.

<div class="card-body">
 <nav class="breadcrumb">
   <a class="breadcrumb-item" href="javascript:void(0)">Home</a>
   <span class="breadcrumb-item active">Ui Kits</span>
 </nav>
 <nav class="breadcrumb m-0">
   <a class="breadcrumb-item" href="javascript:void(0)">Home</a>
   <a class="breadcrumb-item" href="javascript:void(0)">Ui Kits</a>
   <span class="breadcrumb-item active">Alert</span></nav>
</div>

Divider Breadcrumb

You can set breadcrumb using breadcrumb-icon class.

<div class="card-body">
 <nav class="breadcrumb breadcrumb-icon">
   <a class="breadcrumb-item" href="javascript:void(0)">Home</a>
   <span class="breadcrumb-item active">Ui Kits</span>
 </nav>
 <nav class="breadcrumb breadcrumb-icon m-0">
   <a class="breadcrumb-item" href="javascript:void(0)">Home</a>
   <a class="breadcrumb-item" href="javascript:void(0)">Ui Kits</a>
   <span class="breadcrumb-item active">Progress</span>
 </nav>
</div>

With Icons Breadcrumb

You can set icons breadcrumb using breadcrumb class.

  2. Bonus Ui
  2. Bonus Ui
  3. Breadcrumb
<div class="card-body">
 <ol class="breadcrumb bg-white p-l-0">
   <li class="breadcrumb-item">
     <a href="javascript:void(0)">
     <i class="fa fa-home"></i></a>
   </li>
   <li class="breadcrumb-item active">Bonus Ui</li>
 </ol>
 <ol class="breadcrumb bg-white m-b-0 p-b-0 p-l-0">
   <li class="breadcrumb-item">
     <a href="javascript:void(0)">
     <i class="fa fa-home"></i></a>
   </li>
   <li class="breadcrumb-item">Bonus Ui</li>
   <li class="breadcrumb-item active">Breadcrumb</li>
 </ol>
</div>

Variation Of Breadcrumb

You can set variations breadcrumb using breadcrumb class through any icons sets.

<div class="card-body breadcrumb-space">
 <nav class="breadcrumb breadcrumb-no-divider mb-0 gap-2">
   <a class="breadcrumb-item mb-1 mb-xl-0" href="javascript:void(0)">Home-></a>
   <a class="breadcrumb-item ps-0 mb-1 mb-xl-0" href="javascript:void(0)">Tables-></a>
   <a class="breadcrumb-item ps-0 mb-1 mb-xl-0" href="javascript:void(0)">Bootstrap Tables -></a>
   <span class="breadcrumb-item active ps-0">Basic Tables</span>
 </nav>
</div>

Colored Breadcrumb

You can set background colors like [bg-*] and set breadcrumb using the breadcrumb class.

  1. Home
  2. Bonus Ui
  3. Breadcrumb
  1. Home
  2. Icons
  3. Flag-icon
  1. Home
  2. Gallery
  3. Gallery-grid
<div class="card-body">
 <ol class="breadcrumb breadcrumb-colored m-b-30 bg-info">
   <li class="breadcrumb-item"><a class="fw-bold" href="javascript:void(0)">Home</a></li>
   <li class="breadcrumb-item"><a class="fw-bold" href="javascript:void(0)">Bonus Ui</a></li>
   <li class="breadcrumb-item active fw-bold">Breadcrumb</li>
 </ol>
 <ol class="breadcrumb breadcrumb-colored m-b-30 bg-warning">
   <li class="breadcrumb-item"><a class="fw-bold" href="javascript:void(0)">Home</a></li>
   <li class="breadcrumb-item"><a class="fw-bold" href="javascript:void(0)">Icons</a></li>
   <li class="breadcrumb-item active fw-bold">Flag-icon</li>
 </ol>
 <ol class="breadcrumb breadcrumb-colored m-0 bg-danger">
   <li class="breadcrumb-item"><a class="fw-bold" href="javascript:void(0)">Home</a></li>
   <li class="breadcrumb-item"><a class="fw-bold" href="javascript:void(0)">Gallery</a></li>
   <li class="breadcrumb-item active fw-bold">Gallery-grid</li>
 </ol>
</div>