1. Home
  2. UI Elements
  3. Offcanvas & Toasts

Offcanvas & Toasts header small text goes here...

Offcanvas

Below is an offcanvas example that is shown by default (via .show on .offcanvas). Offcanvas includes support for a header with a close button and an optional body class for some initial padding.

Default
Placement
Right Bottom
Offcanvas
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.

Toasts

To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use display: flex, allowing easy alignment of content thanks to our margin and flexbox utilities.

Default
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Notification 11 mins ago
Hello, world! This is a toast message.
App Settings
 
 
 
 
 
 
 
 
 
 
 
 
Dark Mode NEW
Adjust the appearance to reduce glare and give your eyes a break.
Header Fixed
Header Inverse
Sidebar Fixed
RTL Enabled NEW
Admin Design (6)
Language Version (9)
Frontend Design (5)
Documentation Reset Local Storage