Bskin Bootstrap 5 skin ui kit

Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Default Breadcrumb

         <nav aria-label="breadcrumb">
         <ol class="breadcrumb">
         <li class="breadcrumb-item active" aria-current="page"><a href="#" class="text-decoration-none text-gray">Home</a></li>
         </ol>
         </nav>
         <nav aria-label="breadcrumb">
         <ol class="breadcrumb bg-secondary">
         <li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
         <li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
         <li class="breadcrumb-item text-white active" aria-current="page">Library</li>
         </ol>
         </nav>
         <nav aria-label="breadcrumb">
         <ol class="breadcrumb bg-dark">
         <li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
         <li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
         <li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Library</a></li>
         <li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
         <li class="breadcrumb-item text-white active" aria-current="page">Data</li>
         </ol>
         </nav>
         <nav aria-label="breadcrumb">
         <ol class="breadcrumb bg-danger">
         <li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
         <li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
         <li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Library</a></li>
         <li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
         <li class="breadcrumb-item text-white active" aria-current="page">Data</li>
         </ol>
         </nav>
                                    

Animated Breadcrumb

         <nav aria-label="breadcrumb">
         <ol class="breadcrumb bg-danger bg-animation">
         <li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
         <li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
         <li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Library</a></li>
         <li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
         <li class="breadcrumb-item text-white active" aria-current="page">Data</li>
         </ol>
         </nav>
                                    

Gradient Breadcrumb

         <nav aria-label="breadcrumb">
         <ol class="breadcrumb alert-primary-gradient">
         <li class="breadcrumb-item active" aria-current="page"><a href="#" class="text-white text-decoration-none">Home</a></li>
         </ol>
         </nav>
         <nav aria-label="breadcrumb">
         <ol class="breadcrumb bg-secondary alert-secondary-gradient">
         <li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
         <li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
         <li class="breadcrumb-item text-white active" aria-current="page">Library</li>
         </ol>
         </nav>
         <nav aria-label="breadcrumb">
         <ol class="breadcrumb bg-dark alert-dark-gradient">
         <li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
         <li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
         <li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Library</a></li>
         <li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
         <li class="breadcrumb-item text-white active" aria-current="page">Data</li>
         </ol>
         </nav>
         <nav aria-label="breadcrumb">
         <ol class="breadcrumb bg-danger alert-danger-gradient">
         <li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
         <li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
         <li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Library</a></li>
         <li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
         <li class="breadcrumb-item text-white active" aria-current="page">Data</li>
         </ol>
         </nav>
                        

center Breadcrumb

         <nav aria-label="breadcrumb">
         <ol class="breadcrumb justify-content-center">
         <li class="breadcrumb-item active" aria-current="page"><a href="#" class="text-decoration-none text-gray">Home</a></li>
         </ol>
         </nav>
         <nav aria-label="breadcrumb">
         <ol class="breadcrumb bg-secondary justify-content-center">
         <li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
         <li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
         <li class="breadcrumb-item text-white active" aria-current="page">Library</li>
         </ol>
         </nav>
         <nav aria-label="breadcrumb">
         <ol class="breadcrumb bg-dark justify-content-center">
         <li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
         <li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
         <li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Library</a></li>
         <li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
         <li class="breadcrumb-item text-white active" aria-current="page">Data</li>
         </ol>
         </nav>
         <nav aria-label="breadcrumb">
         <ol class="breadcrumb bg-danger justify-content-center">
         <li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
         <li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
         <li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Library</a></li>
         <li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
         <li class="breadcrumb-item text-white active" aria-current="page">Data</li>
         </ol>
         </nav>
                                    

Right Breadcrumb

         <nav aria-label="breadcrumb">
         <ol class="breadcrumb justify-content-end">
         <li class="breadcrumb-item active" aria-current="page"><a href="#" class="text-decoration-none text-gray">Home</a></li>
         </ol>
         </nav>
         <nav aria-label="breadcrumb">
         <ol class="breadcrumb bg-secondary justify-content-end">
         <li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
         <li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
         <li class="breadcrumb-item text-white active" aria-current="page">Library</li>
         </ol>
         </nav>
         <nav aria-label="breadcrumb">
         <ol class="breadcrumb bg-dark justify-content-end">
         <li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
         <li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
         <li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Library</a></li>
         <li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
         <li class="breadcrumb-item text-white active" aria-current="page">Data</li>
         </ol>
         </nav>
         <nav aria-label="breadcrumb">
         <ol class="breadcrumb bg-danger justify-content-end">
         <li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
         <li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
         <li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Library</a></li>
         <li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
         <li class="breadcrumb-item text-white active" aria-current="page">Data</li>
         </ol>
         </nav>
                                       

© Copyright-2022 DesignCollection.in. All rights reserved.