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.