7

I am trying to use bootstrap 5's off canvas. The css & js associated with the plugin do not seem to be included in the framework.

https://deploy-preview-29017--twbs-bootstrap.netlify.app/docs/5.0/components/offcanvas/

The demo on the BS website works; However, the github link on the BS website goes to a 404. https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/components/offcanvas.md

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Joseph Lee
  • 71
  • 1
  • 1
  • 2

1 Answers1

8

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.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624