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:
 |
|
Article Contributed By :
|
|
|
|
|
378 Views |
|