Google Ad Slot: content-top

Bootstrap 5 Modal

~1 min read · Bootstrap

On this page

The Modal component in Bootstrap 5 allows you to create dialogs for user interaction, alerts, or additional content display. Modals can include headers, footers, and body content.

Basic Modal:

A simple modal with a button to toggle it.

Example

Try it yourself

Static Backdrop:

Prevent the modal from closing when clicking outside of it by setting data-bs-backdrop="static" and data-bs-keyboard="false".

Example

Try it yourself

Scrollable Modal:

Create a modal with a scrollable body for longer content.

Example

Try it yourself

Vertically Centered Modal:

Center the modal vertically using .modal-dialog-centered.

Example

Try it yourself

Large,Small and Fullscreen Modals:

Change modal size using .modal-lg or .modal-sm or .modal-fullscreen

Large modal

Small modal

Fullscreen modal

Example

Large Modal: Small Modal: Fullscreen Modal:

Try it yourself

❮ Previous Next ❯

Formatter

Design

Editor

Generator

Converter

Tester

Search

Welcome Back

Create Account

Forgot Password

Bootstrap 5 Modal

Basic Modal:

Static Backdrop:

Scrollable Modal:

Vertically Centered Modal:

Large,Small and Fullscreen Modals:

Cookie Consent & Privacy Preferences