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.
Syntax:
<ol class="breadcrumb"> <li class="breadcrumb-item"> Content .. </li> </ol>
Example 1: This example uses show 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 active" > GeeksforGeeks </ li > </ ol > </ nav > </ div > </ body > </ html > |
Output:
Example 2: This example uses show 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:
Example 3: This example uses show 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" > < a href = "#" >Articles</ a > </ li > < li class = "breadcrumb-item active" > Bootstrap 5 </ li > </ ol > </ nav > </ div > </ body > </ html > |
Output: