Bootstrap Breadcrumbs

In this tutorial you will learn how to create breadcrumbs with Bootstrap.

Creating Breadcrumbs with Bootstrap

A breadcrumb is a navigation scheme that indicates current page's location to the user within a website or application. Breadcrumb navigation can greatly enhance the accessibility of a website having a large number of pages or complex navigational hierarchy.

You can create static breadcrumbs layouts with Bootstrap simply using the class .breadcrumb on the ordered lists, as demonstrated in the following example:

    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Products</a></li>
        <li class="breadcrumb-item active">Accessories</li>

— The output of the above example will look something like this:

The default breadcrumb separator is /. But, you can change it with a little custom CSS, for example, if you want to use > as separator, you can apply the following style rules:

.breadcrumb-item + .breadcrumb-item::before {
    content: ">";

— The output of the above example will look something like this:

Tip: The separators inside the breadcrumb component are added automatically via CSS through the ::before pseudo-element and the content property.

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties