Breadcrumb

  
   
<div class="row pt-3">
   <nav aria-label="breadcrumb">
   <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Standard breadcrumb</a></li>
      <li class="breadcrumb-item" aria-current="page">Text with separator</li>
      <li class="breadcrumb-item active" aria-current="page">Text with separator</li>
   </ol>
</nav>
<br>
<br>
<nav aria-label="row breadcrumb">
   <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Standard breadcrumb</a></li>
      <li class="breadcrumb-item col-1 text-truncate" aria-current="page">Text with separator</li>
      <li class="breadcrumb-item col-1 text-truncate" aria-current="page">Text with separator</li>
      <li class="breadcrumb-item active" aria-current="page">Text with separator</li>
   </ol>
</nav>
</div>

  
   
         .breadcrumb {
          font-size: 14px;
          font-family: "Manrope";
          color: #167df5;
          font-weight: 550;
        }
        
        .breadcrumb a {
          color: #167DF5;
          transition: 0.3s;
        }
        
        .breadcrumb a:hover {
          color: #167df5;
            text-decoration: underline;
        }
        
        .breadcrumb .breadcrumb-item::before {
          color: #6B778C;
        }
        
        .breadcrumb .active {
          color: #363431;
          font-weight: 600;
        }