Breadcrumbs

It used to indicates current page's location to the user within a website or application.

Bootstrap simply using the class .breadcrumb on the ordered lists.

Ex:

<style>

    .bs-example{

        margin: 20px;       

    }

</style>

</head>

<body>

<div class="bs-example">

    <nav>

        <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>

        </ol>

    </nav>

</div>

</body>

 

Modify breadcrumb separator

Default breadcrumb separator is /.

If you want to use > as separator then modify using little modify using CSS.

Syntax:

<style>

    .bs-example{

        margin: 20px;       

    }

    .breadcrumb-item + .breadcrumb-item::before {

        content: ">";

    }

</style>

Powered  by Codersarts