The breadcrumbs in Bootstrap 4

The breadcrumb is the type of navigation that shows user current location of the web page within the navigational hierarchy.

For example, you have main category Electronics and Subcategory Smart-Phones. Within the smart phones, the product models with the brand name are created. If a user is on the product page then you may display the breadcrumb navigation like this:

Electronics >> Smart Phones >> Phone product page

In that way, not only users may know the current location but navigate back to the subcategory or main category pages as well.

By using Bootstrap 4 Framework, you may create breadcrumbs navigation using built-in classes. In this tutorial, I will show you different styles using Bootstrap 4.

The simple example of breadcrumbs – basic style

Generally, you will use <nav>, <ol> and <li> tags of HTML for creating breadcrumbs. In the <ol> tag, specify the .breadcrumb class whereas in the <li> tags use the .breadcrumb-item class.

For showing the current page differently, you may use the .active class in the <li> tag.

See online demo and code

A sample breadcrumb markup:

Grab the complete code from the demo page.

Bootstrap 4 Breadcrumb style number 2

By using background and text contextual classes built-into Bootstrap 4, you may color the breadcrumb navigation panel and text etc. Have a look at the online example where I used various classes for styling breadcrumbs:

See online demo and code

The markup:

Breadcrumb style number 3 with arrows

The following example uses the custom style with Bootstrap breadcrumbs. The custom CSS specifies the arrow style. Have a look at the demo and code:

See online demo and code

The CSS:

The markup:

Using dot instead of slash in breadcrumb

All above examples except the last with arrows used the slash for separating breadcrumb items. You may use some other separator like a dot between the items. For using a dot or other symbol, use the CSS content property as follows:

See online demo and code

The markup of one breadcrumb component:

The CSS:

Using right arrows example

Similarly, you may use the right arrow in content property of CSS as follows:

See online demo and code

The markup:

The CSS

See the output of this example on the demo page.