Bootstrap 4 Breadcrumb Tutorial

Bootstrap allows you to add breadcrumbs to your pages. Generally ordered list <ol> HTML tag is used for breadcrumb and the items are listed using <li> tags. But you can use any text elements like navigation <nav> tags to identify the items as a breadcrumb. Below are the three basic CSS classes used in Bootstrap 4 breadcrumb.

.breadcrumb – to identify the listed items to be shown in a breadcrumb style.

.breadcrumb-item – to list down all items of the breadcrumb.

.breadcrumb-item active – to identify the active page on the breadcrumb structure.

View Breadcrumbs Demo

Bootstrap Breadcrumb with Ordered List

A simple breadcrumb example with ordered list should look like below:

Ideally you don’t need to include the script files for breadcrumb, but those scripts will be required when you use it on your theme or template along with other Bootstrap components.

The result of the above code is shown below:

As you can see the breadcrumbs will have the following features by default:

• Right slash (/) will be added in-between each item using standard CSS pseudo element ::before using “content” attribute.
• The item color with link will be defaulted to blue #0275d8.
• The active item will be defaulted to grey color #636c72 without linking.

If you don’t like the default colors then you can override the CSS “color” property in your theme. Below is an example to override the item and active item colors to red and black.

Remember to load you theme CSS before loading “bootstrap.min.css” file to ensure the modified colors are effective.

Bootstrap Breadcrumb with Text Elements

As mentioned above, it is always not necessary to use <ol> and <li> tags to add Breadcrumb. Bootstrap is smart and can identify any text elements with the class “breadcrumb” as breadcrumb. Below is the example of using <nav> and <a> tags to create similar breadcrumb as created with ordered list.

View Breadcrumbs Demo