Bootstrap 4 Breadcrumb

Bootstrap 4 Breadcrumb is a navigational hierarchy that showing the current page’s location on a website and how far they are from the homepage. You can place it at the top of the content to make it easier for users to access website documents and location.

It defines the relation of the current page level with the lower and higher-level pages. Users can use breadcrumbs to easily jump through higher-level pages and lower-level pages and return to the homepage again.

Let’s create breadcrumbs using Bootstrap 4 with the examples given below.

Bootstrap 4 Breadcrumb

The breadcrumbs can be created using the list elements. You have to add the class .breadcumb to the ordered list <ol> and the class .breadcumb-item to the list elements as given below:

Output

The above example shows the breadcrumb with three links and the last link is active and shows the current location of the user. The navigational links are separated by the slash (/) separator.

Change Breadcrumbs Separator

The default separator of the breadcrumb in Bootstrap 4 is slash (/). However, you can change the default separator to greater than sign > using CSS as given below:

Output

The above example shows the breadcrumbs with greater than sign > separated navigational hierarchy.

Remove Breadcrumb Separator in Bootstrap 4

In addition to the above all examples, you can also remove the separator in breadcrumbs using CSS as given below:

Output