@extends('layouts.master')

@section('content')
<div id="content-page" class="content-page">
    <div class="container-fluid">
       <div class="row">
          <div class="col-sm-12 col-lg-6">
             <div class="iq-card">
                <div class="iq-card-header d-flex justify-content-between">
                   <div class="iq-header-title">
                      <h4 class="card-title">Breadcrumb With Icon</h4>
                   </div>
                </div>
                <div class="iq-card-body">
                   <p>Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.</p>
                   <nav aria-label="breadcrumb">
                      <ol class="breadcrumb">
                         <li class="breadcrumb-item active" aria-current="page"><i class="ri-home-4-line mr-1 float-left"></i>Home</li>
                      </ol>
                   </nav>
                   <nav aria-label="breadcrumb">
                      <ol class="breadcrumb">
                         <li class="breadcrumb-item"><a href="#"><i class="ri-home-4-line mr-1 float-left"></i>Home</a></li>
                         <li class="breadcrumb-item active" aria-current="page">Library</li>
                      </ol>
                   </nav>
                   <nav aria-label="breadcrumb">
                      <ol class="breadcrumb">
                         <li class="breadcrumb-item"><a href="#"><i class="ri-home-4-line mr-1 float-left"></i>Home</a></li>
                         <li class="breadcrumb-item"><a href="#">Library</a></li>
                         <li class="breadcrumb-item active" aria-current="page">Data</li>
                      </ol>
                   </nav>
                </div>
             </div>
          </div>
          <div class="col-sm-12 col-lg-6">
             <div class="iq-card">
                <div class="iq-card-header d-flex justify-content-between">
                   <div class="iq-header-title">
                      <h4 class="card-title">Breadcrumb With Icon</h4>
                   </div>
                </div>
                <div class="iq-card-body">
                   <p>Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.</p>
                   <nav aria-label="breadcrumb">
                      <ol class="breadcrumb">
                         <li class="breadcrumb-item active" aria-current="page"><i class="ri-home-4-line mr-1 float-left"></i>Home</li>
                      </ol>
                   </nav>
                   <nav aria-label="breadcrumb">
                      <ol class="breadcrumb">
                         <li class="breadcrumb-item"><a href="#"><i class="ri-home-4-line mr-1 float-left"></i>Home</a></li>
                         <li class="breadcrumb-item active" aria-current="page">Library</li>
                      </ol>
                   </nav>
                   <nav aria-label="breadcrumb">
                      <ol class="breadcrumb">
                         <li class="breadcrumb-item"><a href="#"><i class="ri-home-4-line mr-1 float-left"></i>Home</a></li>
                         <li class="breadcrumb-item"><a href="#">Library</a></li>
                         <li class="breadcrumb-item active" aria-current="page">Data</li>
                      </ol>
                   </nav>
                </div>
             </div>
          </div>
       </div>
       <div class="row">
          <div class="col-sm-12 col-lg-6">
             <div class="iq-card">
                <div class="iq-card-header d-flex justify-content-between">
                   <div class="iq-header-title">
                      <h4 class="card-title">Breadcrumb</h4>
                   </div>
                </div>
                <div class="iq-card-body">
                   <p>Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.</p>
                   <nav aria-label="breadcrumb ">
                      <ol class="breadcrumb bg-primary">
                         <li class="breadcrumb-item active text-white" aria-current="page">Home</li>
                      </ol>
                   </nav>
                   <nav aria-label="breadcrumb">
                      <ol class="breadcrumb bg-primary">
                         <li class="breadcrumb-item"><a href="#" class="text-white">Home</a></li>
                         <li class="breadcrumb-item active text-white" aria-current="page">Library</li>
                      </ol>
                   </nav>
                   <nav aria-label="breadcrumb">
                      <ol class="breadcrumb bg-primary mb-0">
                         <li class="breadcrumb-item"><a href="#" class="text-white">Home</a></li>
                         <li class="breadcrumb-item"><a href="#" class="text-white">Library</a></li>
                         <li class="breadcrumb-item active text-white" aria-current="page">Data</li>
                      </ol>
                   </nav>
                </div>
             </div>
          </div>
          <div class="col-sm-12 col-lg-6">
             <div class="iq-card">
                <div class="iq-card-header d-flex justify-content-between">
                   <div class="iq-header-title">
                      <h4 class="card-title">Breadcrumb With Icon</h4>
                   </div>
                </div>
                <div class="iq-card-body">
                   <p>Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.</p>
                   <nav aria-label="breadcrumb">
                      <ol class="breadcrumb bg-primary">
                         <li class="breadcrumb-item active text-white" aria-current="page"><i class="ri-home-4-line mr-1 float-left"></i>Home</li>
                      </ol>
                   </nav>
                   <nav aria-label="breadcrumb">
                      <ol class="breadcrumb bg-primary">
                         <li class="breadcrumb-item"><a href="#" class="text-white"><i class="ri-home-4-line mr-1 float-left"></i>Home</a></li>
                         <li class="breadcrumb-item active text-white" aria-current="page">Library</li>
                      </ol>
                   </nav>
                   <nav aria-label="breadcrumb">
                      <ol class="breadcrumb bg-primary mb-0">
                         <li class="breadcrumb-item"><a href="#" class="text-white"><i class="ri-home-4-line mr-1 float-left"></i>Home</a></li>
                         <li class="breadcrumb-item"><a href="#" class="text-white">Library</a></li>
                         <li class="breadcrumb-item active text-white" aria-current="page">Data</li>
                      </ol>
                   </nav>
                </div>
             </div>
          </div>
          <div class="col-sm-12 col-lg-6">
             <div class="iq-card">
                <div class="iq-card-header d-flex justify-content-between">
                   <div class="iq-header-title">
                      <h4 class="card-title">Breadcrumb With Icon</h4>
                   </div>
                </div>
                <div class="iq-card-body">
                   <p>Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.</p>
                   <nav aria-label="breadcrumb">
                      <ol class="breadcrumb iq-bg-primary">
                         <li class="breadcrumb-item active" aria-current="page"><i class="ri-home-4-line mr-1 float-left"></i>Home</li>
                      </ol>
                   </nav>
                   <nav aria-label="breadcrumb">
                      <ol class="breadcrumb iq-bg-primary">
                         <li class="breadcrumb-item"><a href="#"><i class="ri-home-4-line mr-1 float-left"></i>Home</a></li>
                         <li class="breadcrumb-item active" aria-current="page">Library</li>
                      </ol>
                   </nav>
                   <nav aria-label="breadcrumb">
                      <ol class="breadcrumb iq-bg-primary mb-0">
                         <li class="breadcrumb-item"><a href="#"><i class="ri-home-4-line mr-1 float-left"></i>Home</a></li>
                         <li class="breadcrumb-item"><a href="#">Library</a></li>
                         <li class="breadcrumb-item active" aria-current="page">Data</li>
                      </ol>
                   </nav>
                </div>
             </div>
          </div>
          <div class="col-sm-12 col-lg-6">
             <div class="iq-card">
                <div class="iq-card-header d-flex justify-content-between">
                   <div class="iq-header-title">
                      <h4 class="card-title">Breadcrumb With Icon</h4>
                   </div>
                </div>
                <div class="iq-card-body">
                   <p>Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.</p>
                   <nav aria-label="breadcrumb">
                      <ol class="breadcrumb iq-bg-danger">
                         <li class="breadcrumb-item active" aria-current="page"><i class="ri-home-4-line mr-1 float-left"></i>Home</li>
                      </ol>
                   </nav>
                   <nav aria-label="breadcrumb">
                      <ol class="breadcrumb iq-bg-danger">
                         <li class="breadcrumb-item"><a href="#" class="text-danger"><i class="ri-home-4-line mr-1 float-left"></i>Home</a></li>
                         <li class="breadcrumb-item active" aria-current="page">Library</li>
                      </ol>
                   </nav>
                   <nav aria-label="breadcrumb">
                      <ol class="breadcrumb iq-bg-danger mb-0">
                         <li class="breadcrumb-item"><a href="#" class="text-danger"><i class="ri-home-4-line mr-1 float-left"></i>Home</a></li>
                         <li class="breadcrumb-item"><a href="#" class="text-danger">Library</a></li>
                         <li class="breadcrumb-item active" aria-current="page">Data</li>
                      </ol>
                   </nav>
                </div>
             </div>
          </div>
       </div>
    </div>
 </div>

@endsection