How can i create BreadCrumbs - Bootstrap5

Published September 24, 2021


Breadcrumbs are the most required element that user find easy navigation to the website while navigate from one screen to other screens.

To create breadcrumbs with bootstrap we just need to add class = "breadcrumb" the class.

 

A simple example to create Breadcrumbs with Bootstrap5

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
     
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

      <title>Bootstrap 5 Breadcrumb Example</title>
   </head>
   
   <body>


    <div class = "container">
         <h2>Breadcrumb Example</h2>
         <nav aria-label = "breadcrumb">
            <!--Add the "breadcrumb" class to ul element that represents the breadcrumb-->
            <ul class = "breadcrumb">
               <!--Add the ".breadcrumb-item" class to each li element within the breadcrumb-->
               <li class = "breadcrumb-item"><a href = "#">Home</a></li>
               <li class = "breadcrumb-item"><a href="#">Bootstrap5</a></li>
               <!--Add the "active" class to li element to represent the current page-->
               <li class = "breadcrumb-item active" aria-current = "page">Bootstrap 5 Tutorial</li>
            </ul>
         </nav>
      </div>

      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

      
   </body>
</html>

 

When we open this html file in browser it will gives below output:

How can i create BreadCrumbs in html  with bootstrap

 

 


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

25 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions