Breadcrumb in bootstrap 4

In this tutorial, we will look at Breadcrumbs in Bootstrap 4.

Bootstrap framework provides multiple styles for every element on a website. In bootstrap 4, there are different styles for breadcrumbs.
The basic breadcrumb is given below:

It shows hierarchy-based information for a site and displays the present page’s location in a navigational hierarchy. Bootstrap uses the .breadcrumb class to implement the breadcrumb in website.

Syntax for breadcrumb:

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">About Us</a></li>
<li class="breadcrumb-item active" aria-current="page">Contact</li>
</ol>
</nav>

Output:

Explanation:
Breadcrumb provides navigation. It is better to include labels with meaning so that when you navigate from one page to another you will have the information about the pages you have come forward.