Breadcrumbs
It used to indicates current page's location to the user within a website or application.
Bootstrap simply using the class .breadcrumb on the ordered lists.
Ex:
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Products</a></li>
<li class="breadcrumb-item active">Accessories</li>
</ol>
</nav>
</div>
</body>
Modify breadcrumb separator
Default breadcrumb separator is /.
If you want to use > as separator then modify using little modify using CSS.
Syntax:
<style>
.bs-example{
margin: 20px;
}
.breadcrumb-item + .breadcrumb-item::before {
content: ">";
}
</style>