VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/bootstrap-5-offcanvas-components/

⇱ Bootstrap 5 Offcanvas Components - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Bootstrap 5 Offcanvas Components

Last Updated : 30 Jul, 2024

Bootstrap 5 Offcanvas components are the different parts that merge to create an offcanvas sidebar. The components which 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.

Bootstrap 5 Offcanvas components used Classes:

  • offcanvas-start: This class is added to signify the start of the offcanvas.
  • offcanvas-header: This class is added to signify the header of the offcanvas.
  • offcanvas-title: This class is added to signify the title inside the header of the offcanvas.
  • offcanvas-body: This class is added to signify the content body of the offcanvas.

Syntax:

<div class="offcanvas" id="...">
<div class="offcanvas-header">
<h1 class="offcanvas-title">
...
</h1>
</div>
<div class="offcanvas-body">
...
</div>
</div>

Example 1: The code below demonstrates how we can use all the components to create a basic Offcanvas Sidebar:

Output:

Example 2: The example below demonstrates how we can use the components to implement the offcanvas with both body scrolling and backdrop.

Output:

Reference: https://getbootstrap.com/docs/5.0/components/offcanvas/#offcanvas-components

Comment
Article Tags:

Explore