Skip to content
Notifications
Omar Tanaka updated the report
6 days agoMateo Moreau updated the report
yesterdayKenji Ibrahim joined the team
13 hours ago
View all

Modal

Modals put a focused dialog on top of the page for confirmations, forms, previews and long reads. Each example below pairs a trigger with its dialog: sizes, centering, scrolling, static backdrops, fullscreen variants and ready-made dialogs you can drop into Fable Nest.

1Basic modal

A trigger button and a dialog with header, body and footer. Close it with the X, the footer button, Esc or a click on the backdrop.

2Static backdrop

With a static backdrop the dialog stays open when the user clicks outside it or presses Esc - use it when an explicit choice is required.

3Vertically centered

Add <code>.modal-dialog-centered</code> to place the dialog in the middle of the viewport.

4Scrollable body

<code>.modal-dialog-scrollable</code> keeps header and footer visible and scrolls only the body - ideal for terms or long notes.

5Small modal

<code>.modal-sm</code> for quick questions that need little space.

Open a small modal from a link

6Large modal with a table

<code>.modal-lg</code> gives tables and multi-column content room to breathe.

7Extra large modal

<code>.modal-xl</code> fits a full card grid - for galleries, comparisons or dashboards in a dialog.

8Fullscreen modal

<code>.modal-fullscreen</code> covers the whole viewport - good for editors or immersive previews.

9Fullscreen below a breakpoint

<code>.modal-fullscreen-md-down</code> is a normal dialog on desktops and a full screen sheet on phones.

10Sign-in form

A compact login form inside a centered dialog, with labels, a remember-me checkbox and a full width submit button.

11Sign-up form with validation

A <code>.needs-validation</code> form in a modal: required fields show feedback when the user submits.

12Delete confirmation

A small centered danger dialog with an icon, a clear question and two unambiguous buttons.

13Image lightbox

A thumbnail opens a large borderless modal with the full image and a caption.

14Tabs inside a modal

Group related settings with tabs so the dialog stays short.

15Toggle between modals

A button inside the first dialog opens the second one - handy for multi-step flows without stacking dialogs.

16Newsletter sign-up

A header-less promotional dialog with a big icon and an inline email form.

17Product quick view

A two-column dialog: image on the left, price, rating and add-to-cart on the right; stacks on phones.

18Grid inside the body

Use <code>.container-fluid</code> and rows in the modal body to lay out content in columns.

19Success dialog

Confirm a completed action with a large check mark, a summary and a single next step.

20Share dialog

Social share buttons plus a read-only link with a copy button.