YouTip

# Bootstrap4 Breadcrumb Navigation Breadcrumb navigation is a display method based on the hierarchical information of a website. Taking a blog as an example, breadcrumb navigation can show the publication date, category, or tags. They indicate the current page's position within the navigation hierarchy, serving as a navigation aid in the user interface. In Bootstrap, breadcrumb navigation is a simple unordered list with the **.breadcrumb** class. Separators are added via CSS (bootstrap.min.css) using ::before and content, with the following class automatically added: .breadcrumb-item + .breadcrumb-item::before { display: inline-block; padding-right: 0.5rem; color: #6c757d; content: "/";} ## Bootstrap4 Breadcrumb Navigation Example

1. Home

1. Home
2. Library

1. Home
2. Library
3. Data

[Try it »](#) We can also use it without a list format: ## Bootstrap4 Breadcrumb Navigation Example [Try it »](#) [](#)(#) (#)[](#)