Bootstrap Modals

Introduction

In this tour we’ll build a practical mental model for Bootstrap modals: triggers, modal structure (header/body/footer), and the key Properties you’ll use most.

Trigger button

A modal always starts with the trigger that opens it, so this button is more important than it first appears. It shows how the user enters the modal workflow, how the trigger connects to the dialog itself, and why getting that relationship right makes the rest of the modal behavior predictable.

tip: A trigger is just a regular button/link with modal toggle attributes.

Screenshot: Trigger buttonClick to open the larger image

Trigger: Toggle type

In Properties, set the trigger Toggle type to Modal.

important: Toggle type + target must match the modal id.

Screenshot: Trigger: Toggle typeClick to open the larger image

Trigger: Target

In Properties, set the trigger Target to the modal element id.

Screenshot: Trigger: TargetClick to open the larger image

Trigger: Variant

Use Style for button variants (primary/secondary/outline-*, etc.).

Screenshot: Trigger: VariantClick to open the larger image

Modal element

The modal element controls sizing and behavior. Let’s review the options that affect how the modal opens and closes.

tip: Keep modal content focused. For long content, prefer scrolling inside the modal body.

Screenshot: Modal elementClick to open the larger image

Modal: Structure Checklist

A typical modal structure is:

• .modal
• .modal-dialog
• .modal-content
• header (title + close)
• body (main content)
• footer (optional actions)

tip: Keep the main content inside modal-body for consistent padding.

Screenshot: Modal: Structure ChecklistClick to open the larger image

Modal header

The modal header usually contains the title and the close control.

caution: Keep titles descriptive for accessibility and screen readers.

Screenshot: Modal headerClick to open the larger image

Modal close button

The header typically includes a Close button (.btn-close). It uses data-bs-dismiss="modal" and an aria-label so users can dismiss the modal reliably.

Screenshot: Modal close buttonClick to open the larger image

Modal body

The modal body holds the main content: text, forms, or other components.

Screenshot: Modal bodyClick to open the larger image

Modal footer

The modal footer is optional, and it’s a good place for action buttons.

tip: Use a secondary “Close” and a primary “Confirm” action as a common pattern.

Screenshot: Modal footerClick to open the larger image

Modal Properties to Review

Next, review key behavior properties. These control how users can dismiss the modal and how it behaves for accessibility.

Back to modal element

Return to the modal container to review modal-level properties.

Screenshot: Back to modal elementClick to open the larger image

Modal: Centered

In Properties, use Centered to vertically center the dialog.

Screenshot: Modal: CenteredClick to open the larger image

Modal: Scrollable

Use Scrollable when your content can exceed the viewport height.

Screenshot: Modal: ScrollableClick to open the larger image

Modal: Size

Use Size to change the dialog width (e.g. sm/lg/xl depending on the component).

Screenshot: Modal: SizeClick to open the larger image

Modal: No Backdrop

Disable the backdrop only when you have a clear alternative dismissal flow.

Screenshot: Modal: No BackdropClick to open the larger image

Modal: No Close On Click

Disable click-outside-to-close only when users still have a clear intentional dismissal.

Screenshot: Modal: No Close On ClickClick to open the larger image

Modal: Keyboard (Escape)

No Keyboard disables closing with Escape. Only disable this when your UI provides a clear dismissal flow.

Screenshot: Modal: Keyboard (Escape)Click to open the larger image

Modal: Focus

No Focus prevents focusing the modal when initialized. Combine with accessibility best practices for your UI.

Screenshot: Modal: FocusClick to open the larger image

Wrap-up

Modals have two key parts: the trigger (toggle type + target) and the modal element (dialog/content/header/body/footer). Keep those in sync.

Best practices

A few practical tips:

• Keep modals focused on one task
• Avoid deeply nested modals
• Make dismissal clear (Close + backdrop unless intentional)
• If the modal is reused across pages, put it in a layout/template

Keep modals focused

A modal works best when it’s one clear task with a clear close path (Close button + backdrop).

Reuse thoughtfully

If a modal is reused across pages, consider putting it in a shared layout/template to avoid duplication.

Next steps

Continue with a related tour or go back to the Bootstrap tours index.