Bootstrap 5 Breadcrumb
Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. Breadcrumbs are used to indicate the current page’s location within a navigational hierarchy.
Bootstrap 5 Breadcrumb
- Breadcrumb Variables: It changes the default values provided for the breadcrumb by customizing SCSS file of Bootstrap 5.
- Breadcrumb Dividers: It customizes the bootstrap 5 breadcrumb divider, the –bs-breadcrumb-divider custom CSS property or the $breadcrumb-divider and $breadcrumb-divider-flipped Sass variables can be used.
Syntax:
<ol class="breadcrumb"> <li class="breadcrumb-item"> Content .. </li> </ol>
Example 1: This example uses shows the working of Breadcrumbs in Bootstrap 5.
HTML
<!DOCTYPE html> <html> <head> <title> Bootstrap 5 Breadcrumbs </title> <!-- Load Bootstrap --> <link rel="stylesheet" href= integrity= "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> </head> <body class="container"> <div> <h1 class="text-success"> GeeksforGeeks </h1> <strong>Bootstrap 5 Breadcrumb</strong> </div> <br> <div> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item active">GeeksforGeeks</li> <li class="breadcrumb-item">HTML Tutorial</li> <li class="breadcrumb-item">CSS Tutorial</li> </ol> </nav> </div> </body> </html> |
Output:
Example 2: This example uses shows the working of Breadcrumbs in Bootstrap 5.
HTML
<!DOCTYPE html> <html> <head> <title> Bootstrap 5 Breadcrumbs </title> <!-- Load Bootstrap --> <link rel="stylesheet" href= integrity= "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> </head> <body> <div style="text-align: center;width: 600px;"> <h1 style="color: green;"> GeeksforGeeks </h1> </div> <div style="width: 600px;height: 200px;margin:20px;"> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <a href="#"> GeeksforGeeks </a> </li> <li class="breadcrumb-item"> Articles </li> </ol> </nav> </div> </body> </html> |
Output:
Please Login to comment...