Offcanvas component in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this Offcanvas component code?

Look at this Bootstrap Offcanvas HTML snippet. What will you see when you click the button?

Bootsrap

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demoOffcanvas" aria-controls="demoOffcanvas">Open Menu</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="demoOffcanvas" aria-labelledby="demoOffcanvasLabel">
  <div class="offcanvas-header">
    <h5 id="demoOffcanvasLabel">Menu</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Welcome to the sidebar menu!</p>
  </div>
</div>

A A dropdown menu appears below the button with the text 'Welcome to the sidebar menu!'

B A modal popup appears in the center with the text 'Welcome to the sidebar menu!'

C Nothing happens because the button lacks a JavaScript event listener.

D A sidebar slides in from the left with a header 'Menu' and a close button, showing the text 'Welcome to the sidebar menu!'

💡 Hint

Think about what offcanvas-start means in Bootstrap.

The offcanvas-start class makes the sidebar slide in from the left side. The button toggles this sidebar. The content inside the offcanvas is shown inside the sliding panel.

❓ selector

intermediate

Which CSS selector targets the close button inside the Offcanvas component?

Given the Offcanvas HTML below, which CSS selector correctly selects the close button?

<div class="offcanvas" id="myOffcanvas">
  <div class="offcanvas-header">
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
</div>

A button.btn-close[data-bs-dismiss="offcanvas"]

B #myOffcanvas .btn-close

C .offcanvas .btn-close[data-bs-dismiss="modal"]

D .offcanvas-header > button[data-bs-toggle]

💡 Hint

Look for the attribute that tells the button to close the offcanvas.

The close button has data-bs-dismiss="offcanvas". The selector button.btn-close[data-bs-dismiss="offcanvas"] matches it exactly.

🧠 Conceptual

advanced

What ARIA attribute ensures the Offcanvas component is accessible to screen readers?

Which ARIA attribute is essential to link the Offcanvas container with its label for accessibility?

A aria-expanded

B aria-labelledby

C aria-hidden

D aria-controls

💡 Hint

Think about how screen readers know the title of the offcanvas.

The aria-labelledby attribute points to the element that labels the offcanvas, usually the header. This helps screen readers announce the offcanvas title.

❓ layout

advanced

How to make the Offcanvas appear from the bottom instead of the left?

Given this Offcanvas code, which class change makes it slide up from the bottom?

Bootsrap

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <!-- content -->
</div>

A Change <code>offcanvas-start</code> to <code>offcanvas-bottom</code>

B Add <code>offcanvas-top</code> class alongside <code>offcanvas-start</code>

C Replace <code>offcanvas-start</code> with <code>offcanvas-end</code>

D Add <code>offcanvas-right</code> class

💡 Hint

Bootstrap uses directional classes like offcanvas-start and offcanvas-bottom.

The class offcanvas-bottom makes the offcanvas slide up from the bottom edge of the screen.

📝 Syntax

expert

What error occurs if you omit the tabindex="-1" attribute on the Offcanvas container?

Consider this Offcanvas snippet missing tabindex="-1". What happens when you try to open it?

Bootsrap

<div class="offcanvas offcanvas-start" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <!-- content -->
</div>

A The offcanvas opens but the close button does not work.

B The offcanvas fails to open and throws a JavaScript error.

C The offcanvas opens but keyboard focus is not trapped inside, causing accessibility issues.

D The offcanvas opens but the screen reader cannot detect it.

💡 Hint

Think about keyboard navigation and focus management.

The tabindex="-1" attribute allows the offcanvas container to receive focus programmatically. Without it, keyboard users cannot navigate properly inside the offcanvas, causing accessibility problems.