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.

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. You can checkout the sample starter template to be used on a standard Bootstrap 4 templates.

The result of the above code is shown below:

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

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.

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