Bootstrap 5 Breadcrumbs Navigation Styles

Uncategorized / Leave a Comment

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 by:
style=”–bs-breadcrumb-divider: ‘>’;”

HTML

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

Must Read