Bootstrap 5

Bootstrap Tutorials

Bootstrap 5 Offcanvas

Bootstrap 5 Offcanvas



Bootstrap 5 Offcanvas is similar to modals but it is used as a sidebar navigation menu.


Further Explanation:-


  • The .offcanvas class creates the offcanvas sidebar.
  • The .offcanvas-start class positions the offcanvas, and makes it 400px wide.
  • The .offcanvas-title class ensures proper margins and line-height. Then, add your content inside the .offcanvas-body class.
  • To open the offcanvas sidebar, you must use a < button > or an < a > element that points to the id of the .offcanvas container.
  • To open the offcanvas sidebar with an < a > element, you can point to #canvas_1 with the href attribute, instead of data-bs-target attribute.

Code Explanation

All Tutorials related to Bootstrap Tutorials

All Sections related to Bootstrap 5