Bootstrap components

Modals

A dialog that takes the focus of the page to ask for a decision or a short form.

A modal interrupts on purpose: it asks for something the user must answer before going on, such as a confirmation or a short form. Keep it for that.

When to use it

Use it

A clear title that says what is asked, and buttons named by their action (“Delete”, not “OK”).
The main action on the right, cancel next to it; danger for what deletes.
Keep it short; a long form deserves its own page.
Close on Escape, on the close button and on Cancel.

Don't

Open a modal from another modal.
Use it for information that does not need an answer; use an alert.
Open one without the user asking for it.

Anatomy

A dialog (modal-dialog) over a dimmed page, with a header (title and close), a body and a footer with the actions. Sizes: small, default, large and extra large.

Variants and states

Form

A title that says what is asked, the fields, and the actions at the foot: the main one on the right, cancel as a link beside it.

Form

Confirmation

For what deletes or cannot be undone. A tile with the danger icon, a title that is a question, and a button named by its action.

Confirmation

Result

After something finished, a dialog that says so and offers the next step.

Result

Scrollable

When the content is longer than the dialog, the body scrolls and the header and the foot stay in place.

Scrollable

In steps

A wizard in a dialog: the progress of the steps at the top, the choices, and Back on the left with Cancel and Next on the right.

In steps

Combinations

Combination	Use it for
Size × content	Small (`modal-sm`) for a question, default for a form, large (`modal-lg`) for a list or a preview, extra large (`modal-xl`) for a table.
Icon tile × meaning	Danger for what deletes, success for a result, info for a notice; no tile for a plain form.
Scrollable × long content	For terms and lists; never for a long form, which is a page.
Steps × flow	A progress bar of steps, and Back / Cancel / Next in the foot; no more than three steps.
Centred × short	Vertically centred (`modal-dialog-centered`) for a short question; at the top for a form that may grow.

What Didactika changes and why

What we changed	Why it helps
Large radius, a soft deep shadow, no lines between header, body and foot	The dialog is one surface that floats; lines would split it into three boxes.
Cancel is a link and the main action is filled	There is one thing to press; leaving is easy but never competes with it.
The title is a question or a verb and the button repeats it	“Delete course?” / “Delete”: the user knows what will happen without reading the body.
The icon tile sets the tone before the text	A red tile asks for care before a word is read.

Classes

Class	What it does
`modal`, `modal-dialog`, `modal-content`	The layers of a modal
`modal-header`, `modal-title`, `modal-body`, `modal-footer`	Its parts
`modal-sm`, `modal-lg`, `modal-xl`	Sizes
`btn-closeclose`	Close button
`dd-modal-static`	Shows a dialog in the page instead of over it, for the examples (Didactika)
`modal-footer-split`	Back on the left, the actions on the right (Didactika)

In this version

Bootstrap 5.3 keeps its colours in CSS variables (--bs-*), so a theme recolours the component with one variable.

Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet.

Accessibility

role="dialog" (or alertdialog for a confirmation) with aria-labelledby pointing at the title.
Focus moves into the modal when it opens, stays inside while open, and returns to the trigger when it closes.
Escape closes it; the page behind is not reachable.