Bootstrap 4 Components

Breadcrumb

Breadcrumb in a website is for users to navigate their way back to the starting point. They also help to indicate the location of the user in the website’s hierarchy. It improves the user experience of a website.

We can style a list into a breadcrumb using the class .breadcrumb. Separators are automatically added in CSS through ::before and content.

Add class .active to indicate the active page or section of the website.

• Home
• Library
• Data

<ul class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active">Data</li> </ul>