Offcanvas
Bootstrap 5 OffCanvas components constitute an offcanvas are a header with a close button and a body section which is optional and we can also add some action buttons on the footer section which are optional too.
| Components |
Descriptions |
| Offcanvas components | Bootstrap 5 Offcanvas components are the different parts that merge to create an offcanvas sidebar. |
| Live demo | Bootstrap 5 Offcanvas live demo of Offcanvas can be implemented using a link with href attribute or button with data-bs-target attribute by applying javascript to the element. |
| Placement | Bootstrap 5 Offcanvas Placement has four directions from which the carousel can pop out which are left(default), top, bottom, and right. |
| Backdrop | Bootstrap 5 Offcanvas Backdrop is the greyish translucent cover that is all over the background which is shown when the off-canvas opens. |
| Sass | Bootstrap 5 Offcanvas SASS can be used to change the default values provided for the Offcanvas by customizing scss file of bootstrap5. |
| Usage | Bootstrap 5 Offcanvas Usage Options are employed to manually regulate the off-canvas element’s display. |
| Via data attributes | An Offcanvas can be triggered or used using two ways using data attributes and using JavaScript. |
| Via JavaScript | Bootstrap 5 Offcanvas can be triggered or used using two ways using data attributes and using JavaScript. |
| Options | Bootstrap 5 Offcanvas Usage Options are employed to manually regulate the off-canvas element’s display |
| Methods | Bootstrap 5 Offcanvas methods are used to control the visibility of the offcanvas element, manually. |
| Events | Bootstrap 5 Offcanvas Events fired when interacting with the Bootstrap 5 offcanvas. |
Bootstrap 5 Components Reference
Bootstrap 5 Components enable the user to make their own Components and can include more functionality by adding the Accordion, Alerts, Badge, Breadcrumb, Buttons, etc, which help to enhance the overall user experience, along with engaging the users on their sites by decorating them.
The complete list of Components is listed below with their brief description: