Modal¶

Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Examples¶

Default, scrollable body, and fullscreen.

DefaultScrollableFullscreen

Usage

Setting trigger_label renders a self-contained trigger button that opens the modal — omit it to wire up your own external trigger elsewhere, referencing modal_id.

{% embed 'bootstrap_components:modal' with {
  trigger_label: 'Open modal',
} %}
  {% block title %}Modal title{% endblock %}
  {% block body %}
    <p>Woo-hoo, you're reading this text in a modal!</p>
  {% endblock %}
  {% block footer %}
    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary btn-sm">Save changes</button>
  {% endblock %}
{% endembed %}

centered + scrollable together: the body scrolls independently while the header and footer stay put.

Usage

{% embed 'bootstrap_components:modal' with {
  trigger_label: 'Open modal',
  centered: true,
  scrollable: true,
} %}
  {% block title %}Modal title{% endblock %}
  {% block body %}
    <p>This modal has a long body, so the body itself scrolls while the header and footer stay put.</p>
    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
  {% endblock %}
  {% block footer %}
    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary btn-sm">Save changes</button>
  {% endblock %}
{% endembed %}

The fullscreen prop covers the entire viewport, optionally only below a given breakpoint.

Usage

{% embed 'bootstrap_components:modal' with {
  trigger_label: 'Open modal',
  fullscreen: 'modal-fullscreen',
} %}
  {% block title %}Full screen{% endblock %}
  {% block body %}
    <p>This modal covers the entire viewport, useful for immersive content or a focused task on small screens.</p>
  {% endblock %}
  {% block footer %}
    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
  {% endblock %}
{% endembed %}

Props¶

Prop	Type	Description	Example
`variant`	string	Dialog size: `default`, `sm`, `lg` or `xl`. Defaults to `default`.	`default`
`trigger_label`	string	If provided, renders a self-contained trigger button with this text that opens the modal. Omit to wire up your own external trigger button elsewhere, referencing `modal_id`.	`Open modal`
`trigger_icon`	string	Optional icon on the trigger button, as `pack:name`.	`bootstrap_ui_kit:window-stack`
`trigger_variant`	string	Button variant of the trigger button. Defaults to `primary`.	`primary`
`color_scheme`	string	`light` or `dark`. Dark renders the dialog in Bootstrap's dark color mode. Defaults to `light`.	`light`
`static`	boolean	When set, the modal will not close when clicking outside of it.	`false`
`centered`	boolean	Vertically center the modal.	`false`
`scrollable`	boolean	Allows the modal body to scroll independently.	`false`
`fullscreen`	string	Pop up a modal that covers the viewport, optionally only below a given breakpoint.	`modal-fullscreen`
`modal_id`	string	ID used by external buttons to toggle visibility. Must start with a letter. Randomly generated if empty.

Slots¶

Slot	Description
`title`	Modal title displayed in the header.
`body`	The main modal content area. Supports rich text, forms, images, and nested components.
`footer`	Modal footer area. Typically contains action buttons like Save and Close.

Variants¶

Variant	Description
`sm`	Small dialog.
`default`	Standard dialog width.
`lg`	Large dialog.
`xl`	Extra large dialog.