Bootstrap 5 | Breadcrumb - GeeksforGeeks

29 Jul, 2020
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.
<!DOCTYPE html><html>  <head>    <title>        Bootstrap 5 | Breadcrumbs    </title>      <!-- Load Bootstrap -->    <link rel="stylesheet"           href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"        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.
<!DOCTYPE html><html>  <head>    <title>        Bootstrap 5 | Breadcrumbs    </title>      <!-- Load Bootstrap -->    <link rel="stylesheet"           href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"        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.
<!DOCTYPE html><html>  <head>    <title>        Bootstrap 5 | Breadcrumbs    </title>      <!-- Load Bootstrap -->    <link rel="stylesheet"           href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"        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:
Bootstrap-Misc
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to align navbar items to the right in Bootstrap 4 ?
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
Roadmap to Become a Web Developer in 2022
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
Installation of Node.js on Linux
Convert a string to an integer in JavaScript