<div class="col-lg-12">
  <div class="card">
    <h5 class="card-header">Breadcrumbs</h5>
    <div class="card-body">

      <!-- Basic Breadcrumb -->
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <a href="javascript:void(0);">Home</a>
          </li>
          <li class="breadcrumb-item">
            <a href="javascript:void(0);">Library</a>
          </li>
          <li class="breadcrumb-item active">Data</li>
        </ol>
      </nav>

      <!-- Custom Icon Breadcrumb -->
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb breadcrumb-custom-icon">
          <li class="breadcrumb-item">
            <a href="javascript:void(0);">Home</a>
            <i class="breadcrumb-icon icon-base bx bx-chevron-right align-middle"></i>
          </li>
          <li class="breadcrumb-item">
            <a href="javascript:void(0);">Library</a>
            <i class="breadcrumb-icon icon-base bx bx-chevron-right align-middle"></i>
          </li>
          <li class="breadcrumb-item active">Data</li>
        </ol>
      </nav>

      <!-- Custom Style Breadcrumb -->
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <a href="javascript:void(0);">Home</a>
          </li>
          <li class="breadcrumb-item">
            <a href="javascript:void(0);">Library</a>
            <i class="breadcrumb-icon icon-base bx bx-chevron-down align-middle"></i>
          </li>
          <li class="breadcrumb-item active">Data</li>
        </ol>
      </nav>

    </div>
  </div>
</div>