Offcanvas component in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a button that toggles the offcanvas component.

Bootsrap

<button class="btn btn-primary" type="button" data-bs-toggle="[1]" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Toggle Offcanvas
</button>

Drag options to blanks, or click blank then click option'

Aoffcanvas

Bmodal

Cdropdown

Dcollapse

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'modal' or 'dropdown' instead of 'offcanvas' for the toggle attribute.

The attribute data-bs-toggle="offcanvas" tells Bootstrap that this button will toggle an offcanvas component.

2fill in blank

medium

Complete the code to set the offcanvas component to appear from the right side.

Bootsrap

<div class="offcanvas [1]" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas Right</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Content goes here.
  </div>
</div>

Drag options to blanks, or click blank then click option'

Aoffcanvas-bottom

Boffcanvas-end

Coffcanvas-start

Doffcanvas-top

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'offcanvas-start' which makes it appear from the left side.

The class offcanvas-end makes the offcanvas appear from the right side.

3fill in blank

hard

Fix the error in the offcanvas close button to properly dismiss the offcanvas.

Bootsrap

<button type="button" class="btn-close" data-bs-dismiss="[1]" aria-label="Close"></button>

Drag options to blanks, or click blank then click option'

Aoffcanvas

Bdropdown

Cmodal

Dcollapse

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'modal' or 'dropdown' which won't close the offcanvas.

The attribute data-bs-dismiss="offcanvas" tells Bootstrap to close the offcanvas when this button is clicked.

4fill in blank

hard

Fill both blanks to create an offcanvas that is scrollable and has a backdrop.

Bootsrap

<div class="offcanvas [1]" data-bs-scroll="[2]" tabindex="-1" id="offcanvasScrollable" aria-labelledby="offcanvasScrollableLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollableLabel">Scrollable Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Lots of content here...
  </div>
</div>

Drag options to blanks, or click blank then click option'

Aoffcanvas-start

Btrue

Cfalse

Doffcanvas-end

Attempts:

3 left

💡 Hint

Common Mistakes

Setting data-bs-scroll to 'false' disables scrolling inside the offcanvas.

The class offcanvas-start sets the offcanvas to slide in from the left. The attribute data-bs-scroll="true" allows the offcanvas body to be scrollable.

5fill in blank

hard

Fill all three blanks to create an offcanvas with a header title, a body paragraph, and a close button with proper ARIA label.

Bootsrap

<div class="offcanvas offcanvas-[1]" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">[2]</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="[3]"></button>
  </div>
  <div class="offcanvas-body">
    <p>This is the offcanvas body content.</p>
  </div>
</div>

Drag options to blanks, or click blank then click option'

Astart

BOffcanvas Title

CClose

Dend

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect ARIA labels or missing the offcanvas side class.

The class offcanvas-end makes the offcanvas slide in from the right. The header title is set to 'Offcanvas Title'. The close button has an ARIA label 'Close' for accessibility.

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