Bootstrap 5 Modals

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

Modal Sizes

Responsive

Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog.

Modal Variations

Interactive

Various modal types with different behaviors and styles.

Form Modal

Interactive Form

Modals can contain forms for user input and data collection.

Confirmation Modal

Action Required

Use modals for important confirmations and destructive actions.

Maximum Content Space

Extra large modals provide maximum space for complex layouts and rich content. This size is perfect for:

Data Visualization

Charts, graphs, and complex data displays.

Multi-column Layouts

Side-by-side content and comparison views.

Rich Media

Videos, image galleries, and interactive content.

Advanced Forms

Complex forms with multiple sections.

Technical Details

Size

1140px wide

Class

.modal-xl

Responsive

Adapts to screen size

Long Content Example

This modal demonstrates scrollable content. When content exceeds the viewport height, the modal body becomes scrollable while keeping the header and footer in place.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Additional content to demonstrate scrolling behavior. You can add as much content as needed, and the modal will handle scrolling appropriately.

The scrollable modal keeps the header and footer visible while allowing the body content to scroll.