Modal structure and triggers in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a modal in Bootstrap?

A modal is a popup window that appears on top of the main page content to grab the user's attention for important information or actions.

beginner

Which HTML element attribute is used to trigger a Bootstrap modal?

The data-bs-toggle="modal" attribute is used on a button or link to trigger the modal to open.

beginner

What role does the data-bs-target attribute play in Bootstrap modals?

It specifies which modal to open by pointing to the modal's ID, for example data-bs-target="#myModal".

beginner

Name the main parts inside a Bootstrap modal structure.

The main parts are:

• modal-header - title and close button
• modal-body - main content
• modal-footer - action buttons

intermediate

How do you make a modal accessible for keyboard users?

Bootstrap modals automatically trap keyboard focus inside the modal and allow closing with the Escape key, making them accessible.

Which attribute opens a Bootstrap modal when clicked?

A data-toggle="dropdown"

B data-bs-toggle="modal"

C href="#modal"

D onclick="openModal()"

The attribute data-bs-toggle="modal" tells Bootstrap to open the modal on click.

What does data-bs-target="#myModal" do?

A Specifies the modal to open by its ID

B Sets the modal title

C Closes the modal

D Changes modal size

It points to the modal element with ID 'myModal' to open it.

Which class is used for the modal's main content area?

A modal-body

B modal-header

C modal-footer

D modal-content

The modal-body class holds the main content inside the modal.

How can a user close a Bootstrap modal using the keyboard?

A Press the Spacebar

B Press the Enter key

C Press the Tab key

D Press the Escape key

Pressing Escape closes the modal for keyboard accessibility.

Which element usually contains the modal's close button?

A modal-footer

B modal-body

C modal-header

D modal-dialog

The close button is typically inside the modal-header.

Describe the basic HTML structure of a Bootstrap modal and how it is triggered.

Think about the nested divs and the button attributes that open the modal.

Explain how Bootstrap modals support accessibility and keyboard navigation.

Consider how users who don't use a mouse can still interact with the modal.