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.

...
...
...
...
...
...

##### Offcanvas With Background Image