Bootstrap 5 Off Canvas Missing CSS/JS

Viewed 9290
1 Answers

Bootstap 5 beta 3 (Update 2021)

Bootstrap has finally introduced an official Offcanvas component! From the offical blog...

"..the offcanvas comes with configurable backdrop, body scroll, and placement. Offcanvas components can be placed on the left, right, and bottom of the viewport..."

Bootstrap Offcanvas demo

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
    Open Sidebar
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div> Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. </div>
        <div class="dropdown mt-3">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"> Dropdown button </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
        </div>
    </div>
</div>

Read more


Bootstap 5 beta 2 (Original answer)

As you can see in the official Bootstrap docs, there is not (yet) a Off-canvas component in Bootstrap 5 beta. The netlify docs you referenced are based on an older pre-alpha build.

The Bootstrap 5 examples do show an experimental off-canvas layout, but like the other examples it requires extra custom CSS and JS that can be found here in the Bootstrap GH repo

Once you include the extra CSS/JS, the off-canvas example works as expected.

Related