Offcanvas component in Bootsrap - Mini Project: Build & Apply

Create a Bootstrap Offcanvas Component

📖 Scenario: You want to add a sidebar menu that slides in from the left side of the screen when a button is clicked. This is useful for navigation on small screens or mobile devices.

🎯 Goal: Build a simple Bootstrap offcanvas component that opens from the left side when a button is clicked. The offcanvas should have a header with a title and a close button, and some body content.

📋 What You'll Learn

Use Bootstrap 5 classes and structure for the offcanvas component

Create a button that toggles the offcanvas visibility

The offcanvas should slide in from the left side

Include a header with a title and a close button inside the offcanvas

Add some placeholder text inside the offcanvas body

💡 Why This Matters

🌍 Real World

Offcanvas components are commonly used in mobile navigation menus and sidebars to save screen space and improve user experience.

💼 Career

Knowing how to implement Bootstrap offcanvas components is useful for front-end developers building responsive and interactive web interfaces.

1

Set up the basic HTML structure with Bootstrap CSS link

Create a basic HTML5 document with lang="en", meta charset="UTF-8", and meta viewport tags. Include the Bootstrap 5 CSS link inside the <head>. Add an empty <body> section.

Bootsrap

    
    
    Bootstrap Offcanvas
    

Hint

Remember to include the Bootstrap CSS link from a CDN inside the <head> section.

2

Add a button to toggle the offcanvas

Inside the <body>, add a <button> with class="btn btn-primary", type="button", data-bs-toggle="offcanvas", and data-bs-target="#offcanvasExample". The button text should be Open Menu.

Bootsrap

    
    
    Bootstrap Offcanvas
    


    
    

Hint

Use data-bs-toggle="offcanvas" and data-bs-target="#offcanvasExample" on the button to link it to the offcanvas.

3

Create the offcanvas element with header and body

Below the button, add a <div> with class="offcanvas offcanvas-start", tabindex="-1", id="offcanvasExample", and aria-labelledby="offcanvasExampleLabel". Inside it, add a <div> with class="offcanvas-header" containing a <h5> with id="offcanvasExampleLabel" and text Menu, and a close button with class="btn-close", data-bs-dismiss="offcanvas", and aria-label="Close". Then add a <div> with class="offcanvas-body" containing the text This is the offcanvas content.

Bootsrap

    
    
    Bootstrap Offcanvas
    


    
        Open Menu
    

    
    

Hint

Use the Bootstrap offcanvas structure with offcanvas-start to slide in from the left.

4

Add Bootstrap JavaScript bundle for functionality

Before the closing </body> tag, add a <script> tag that loads the Bootstrap 5 JavaScript bundle from the CDN: https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js. This enables the offcanvas toggle functionality.

Bootsrap

    
    
    Bootstrap Offcanvas
    


    
        Open Menu
    

    
        
            Menu
            
        
        
            This is the offcanvas content.
        
    

    
    

Hint

Include the Bootstrap JavaScript bundle before the closing </body> tag to enable interactive components.

Practice

1. What is the main purpose of the Bootstrap offcanvas component?

easy

A. To hide content off-screen and slide it in when triggered

B. To create a fixed header at the top of the page

C. To add a footer with copyright information

D. To display modal popups in the center of the screen

Solution

1. Step 1: Understand the offcanvas component role

   The offcanvas component is designed to keep content hidden off-screen initially.

2. Step 2: Recognize its behavior on trigger

   When triggered, it slides in to show the hidden content, improving page focus.

3. Final Answer:

   To hide content off-screen and slide it in when triggered -> Option A

4. Quick Check:

   Offcanvas = hidden sliding content [OK]

Hint: Offcanvas slides content in from off-screen [OK]

Common Mistakes:

• Confusing offcanvas with modal popups
• Thinking it creates fixed headers or footers
• Assuming it always shows content without sliding

2. Which of the following is the correct way to toggle an offcanvas component using a button in Bootstrap?

easy

A. Toggle

B. Toggle

C. Toggle

D. Toggle

Solution

1. Step 1: Identify the correct data attribute for offcanvas toggle

   Bootstrap uses data-bs-toggle="offcanvas" to toggle offcanvas components.

2. Step 2: Confirm the target attribute

   The data-bs-target attribute points to the offcanvas element's ID, e.g., #myOffcanvas.

3. Final Answer:

   <button data-bs-toggle="offcanvas" data-bs-target="#myOffcanvas">Toggle</button> -> Option C

4. Quick Check:

   Toggle offcanvas = data-bs-toggle="offcanvas" [OK]

Hint: Use data-bs-toggle="offcanvas" to toggle offcanvas [OK]

Common Mistakes:

• Using data-toggle instead of data-bs-toggle
• Using modal or dropdown toggle attributes
• Missing the correct data-bs-target selector

3. What will happen when the following code is rendered and the button is clicked?

<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#demoOffcanvas">Open</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="demoOffcanvas">
  <div class="offcanvas-header">
    <h5>Menu</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">Content here</div>
</div>

medium

A. Nothing happens because the offcanvas is missing a JavaScript import

B. A modal popup appears in the center with 'Menu' and 'Content here'

C. The button triggers a dropdown menu instead of offcanvas

D. A sidebar slides in from the left showing 'Menu' and 'Content here'

Solution

1. Step 1: Analyze the button attributes

   The button uses data-bs-toggle="offcanvas" and targets #demoOffcanvas, so it triggers the offcanvas component.

2. Step 2: Understand the offcanvas element classes

   The offcanvas has class offcanvas-start, meaning it slides in from the left side.

3. Final Answer:

   A sidebar slides in from the left showing 'Menu' and 'Content here' -> Option D

4. Quick Check:

   offcanvas-start = slide from left [OK]

Hint: offcanvas-start slides from left, triggered by data-bs-toggle [OK]

Common Mistakes:

• Confusing offcanvas with modal popups
• Forgetting to include Bootstrap JS for functionality
• Assuming offcanvas appears as dropdown

4. Identify the error in this offcanvas toggle button code:

<button class="btn btn-secondary" data-bs-toggle="offcanvas" data-target="#sidePanel">Show</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="sidePanel">
  <div class="offcanvas-header">
    <h5>Side Panel</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">Details here</div>
</div>

medium

A. The offcanvas element is missing the class show

B. The button uses incorrect attribute data-target instead of data-bs-target

C. The button should have type="submit" to work

D. The offcanvas ID should not contain uppercase letters

Solution

1. Step 1: Check button data attributes for toggling offcanvas

   Bootstrap 5 requires data-bs-target for toggling, not data-target.

2. Step 2: Verify other attributes and classes

   The offcanvas element and button classes are correct; no need for show class initially.

3. Final Answer:

   The button uses incorrect attribute data-target instead of data-bs-target -> Option B

4. Quick Check:

   Use data-bs-target, not data-target [OK]

Hint: Bootstrap 5 uses data-bs-target, not data-target [OK]

Common Mistakes:

• Using old Bootstrap 4 attribute names
• Adding show class manually on offcanvas
• Assuming button needs type="submit"

5. You want an offcanvas panel that slides in from the bottom and closes when the user clicks outside it or presses Escape. Which combination of classes and attributes should you use?

hard

A. Use offcanvas-bottom class on the offcanvas and ensure tabindex="-1" is set

B. Use offcanvas-top class and add data-bs-backdrop="false"

C. Use offcanvas-end class and omit tabindex attribute

D. Use offcanvas-start class and add data-bs-scroll="true"

Solution

1. Step 1: Choose the correct offcanvas position class

   To slide in from the bottom, use the offcanvas-bottom class.

2. Step 2: Ensure accessibility and closing behavior

   Setting tabindex="-1" allows keyboard focus and enables closing with Escape key and outside clicks by default.

3. Final Answer:

   Use offcanvas-bottom class on the offcanvas and ensure tabindex="-1" is set -> Option A

4. Quick Check:

   Bottom offcanvas = offcanvas-bottom + tabindex="-1" [OK]

Hint: Bottom offcanvas uses offcanvas-bottom and tabindex="-1" [OK]

Common Mistakes:

• Using offcanvas-top instead of offcanvas-bottom
• Disabling backdrop with data-bs-backdrop="false"
• Omitting tabindex attribute causing keyboard issues