Bootstrap 5 Breadcrumbs Navigation Styles
Live Preview Compare Hosting

Bootstrap 5 Breadcrumbs Navigation Styles

Bootstrap 5 breadcrumb navigations in 4 styles with their separate dividers. In Bootstrap breadcrumb, we just need to add one line style code to change the divider between the breadcrumb navigation as you see in the below code examples.

Modifying custom CSS property and change divider

style="--bs-breadcrumb-divider: '>';"

Bootstrap Breadcrumb Navigation Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <title>How To Create Bootstrap 5 Breadcrumbs Navigation Styles</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://www.markuptag.com/bootstrap/5/css/bootstrap.min.css">

</head>
<body>

    <div class="bg-light mt-4">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0 py-2">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item"><a href="#">Tutorials</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <br>

    <div class="bg-light mt-4">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <nav aria-label="breadcrumb" style="--bs-breadcrumb-divider: ':-';">
                        <ol class="breadcrumb mb-0 py-2">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item"><a href="#">Tutorials</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <br>

    <div class="bg-light mt-4">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <nav aria-label="breadcrumb" style="--bs-breadcrumb-divider: '>>';">
                        <ol class="breadcrumb mb-0 py-2">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item"><a href="#">Tutorials</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <br>

    <div class="bg-light mt-4">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <nav aria-label="breadcrumb" style="--bs-breadcrumb-divider: '~';">
                        <ol class="breadcrumb mb-0 py-2">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item"><a href="#">Tutorials</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>


    <!-- Bootstrap JS -->
    <script src="https://www.markuptag.com/bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Leave a Comment