Bootstrap 5 Offcanvas

Bootstrap 5 Offcanvas

Bootstrap 5 offcanvas is used to make hidden sidebars within the project for navigation.

Steps to create bootstrap 5 Offcanvas:

  • To show and hide offcanvas element, use <button> and <a> element.
  • Use link <a> with href attribute and <button> with the data-bs-target attribute. In both cases, use the data-bs-toggle="offcanvas".Please keep in mind that href and data-bs-target contains the offcanvas container id preceded by hash character(#).
  • Assign.offcanvas followed by one of the (.offcanvas-start,.offcanvas-end,.offcanvas-top,.offcanvas-bottom )to the offcanvas container and also assign unique id to offcanvas container.
  • Assign .offcanvas-header Offcanvas header container and place offcanvas header title and assign .offcanvas-title and also place <button> and assign data attribute data-bs-dismiss="offcanvas" and assign btn-close.text-reset element.
  • Write offcanvas content inside .offcanvas-body container.

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note:Follow the above mention process to make bootstrap 5 offcanvas component.

Online Test / Quiz