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.