Offcanvas component in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an Offcanvas component in Bootstrap?

An Offcanvas component is a sidebar panel that slides in from the side of the screen. It is used to show hidden content like menus or information without leaving the current page.

beginner

How do you trigger an Offcanvas component to open in Bootstrap?

You use a button or link with data-bs-toggle="offcanvas" and data-bs-target="#offcanvasExample" attributes to open the Offcanvas panel with the matching ID.

beginner

Which Bootstrap class defines the Offcanvas panel container?

The class <code>offcanvas</code> defines the Offcanvas panel container. You also add a position class like <code>offcanvas-start</code> or <code>offcanvas-end</code> to set the slide direction.

intermediate

How can you make the Offcanvas component accessible for keyboard users?

Bootstrap Offcanvas automatically traps keyboard focus inside the panel when open and allows closing with the Escape key. Use semantic HTML and ARIA roles for better accessibility.

beginner

What is the purpose of the offcanvas-header and offcanvas-body classes?

offcanvas-header styles the top area of the Offcanvas panel, usually containing the title and close button. offcanvas-body holds the main content inside the panel.

Which attribute is used to toggle an Offcanvas component in Bootstrap?

A data-toggle="modal"

B data-bs-target="#modal"

C data-bs-toggle="offcanvas"

D data-toggle="dropdown"

The attribute data-bs-toggle="offcanvas" is used to open or close an Offcanvas component.

What class would you add to make the Offcanvas slide in from the right side?

A offcanvas-end

B offcanvas-top

C offcanvas-start

D offcanvas-bottom

The class offcanvas-end makes the Offcanvas slide in from the right side.

Which element usually contains the close button inside an Offcanvas?

A offcanvas-footer

B offcanvas-header

C offcanvas-body

D offcanvas-close

The offcanvas-header typically contains the close button and title.

How can users close an open Offcanvas component using the keyboard?

A Press the Escape key

B Press the Tab key

C Press the Spacebar

D Press the Enter key

Pressing the Escape key closes the Offcanvas component for keyboard users.

What is the main purpose of the Offcanvas component?

A To create modal popups

B To display dropdown menus

C To replace the navbar

D To show hidden side content without leaving the page

Offcanvas is used to show hidden side content like menus or info without navigating away.

Explain how to create a basic Offcanvas component in Bootstrap and how to open it with a button.

Think about the HTML structure and attributes needed.

Describe accessibility features Bootstrap Offcanvas provides and why they are important.

Consider how users with disabilities interact with UI.

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