Placement

There’s no default placement for offcanvas components, so you must add one of the modifier classes below;

• .offcanvas-startplaces offcanvas on the left of the viewport.
• .offcanvas-endplaces offcanvas on the right of the viewport.
• .offcanvas-topplaces offcanvas on the top of the viewport.
• .offcanvas-bottomplaces offcanvas on the bottom of the viewport.

Hide & Show

Use the buttons below to show and hide an offcanvas element via JavaScript that toggles the .show class on an element with the .offcanvas class.

• .offcanvashides content (by default).
• .offcanvas.showshows content.