Basics

Markup

Here is the basic example of an offcanvas component with required code.

Basic example

The following code displays what you need in your <body> tag to have a simple offcanvas.

<div id="offcanvas" class="offcanvas">
  <button type="button" class="close" data-dismiss="offcanvas" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
  ...
</div>

To open the above offcanvas, you need an element with data-toggle="offcanvas" and data-target="#offcanvas" attributes on it, like the following button.

<button class="btn btn-primary" type="button" data-toggle="offcanvas" data-target="#offcanvas">Launch demo offcanvas</button>

Animations

You can specify an animation for the entrance of your offcanvas.

To have an animation for an offcanvas component, add a data-attribute="animation-name", which animation-name could be any string value of fade | slide-up | slide-down | slide-left | slide-right.


Variations

With a little help from utility classes, you can create useful offcanvases for different purposes.