##### Amara Evans

amara@example.com

Pro

### Upgrade to Pro

Get access to all features

- Advanced Analytics
- Team Collaboration
- API Access

Upgrade Now
Upgrade to Pro
Log Out

# Modal

Modals are powerful UI components that create focused interaction spaces above the main content. They're perfect for capturing user attention, displaying critical information, collecting input, or requesting confirmations. With built-in accessibility features and responsive design, modals ensure a seamless user experience across all devices.

### Live Demo

Experience the modal functionality by clicking the button below. This example showcases a standard modal implementation with customizable content.

Live Demo
Loading...
Live Demo
Loading...

### Static Backdrop

The static backdrop modal enforces user interaction by preventing dismissal through outside clicks. This pattern is ideal for important confirmations or mandatory actions that require explicit user response.

Static Backdrop
Loading...
Static Backdrop
Loading...

### Scrollable Content

When dealing with extensive content, modals can automatically adapt with scrollable areas while maintaining fixed headers and footers. This ensures a clean, organized presentation of large amounts of information.

Scrollable Content
Loading...
Scrollable Content
Loading...

### Vertically Centered

Center your modals vertically in the viewport for optimal visual balance and user experience. This is particularly effective for important messages or focused interactions.

Centered Modal
Loading...
Centered Modal
Loading...

### Interactive Tooltips

Enhance your modals with interactive tooltips to provide additional context and guidance. These tooltips are automatically managed with the modal's lifecycle, ensuring proper cleanup when the modal is closed.

Tooltips
Loading...
Tooltips
Loading...

### Grid System

Leverage Bootstrap's powerful grid system within modals to create sophisticated layouts. The grid system maintains its full functionality, allowing you to design complex, responsive content arrangements that adapt seamlessly across different screen sizes.

Grid System
Loading...
Grid System
Loading...

### Modal Sequences

Create interactive workflows by chaining multiple modals together. This pattern is excellent for multi-step processes, wizards, or progressive disclosure of information. Each modal smoothly transitions to the next while maintaining context and flow.

Modal Sequences
Loading...
Modal Sequences
Loading...

### Size Variations

Modals come in different sizes to accommodate various content needs. Choose from small (modal-sm) for simple dialogs, large (modal-lg) for more complex content, or extra-large (modal-xl) for full-featured interfaces. Each size is responsive and maintains proper spacing across devices.

Size Variations
Loading...
Size Variations
Loading...

### Responsive Fullscreen

Create immersive experiences with fullscreen modals that adapt to different screen sizes. Use responsive fullscreen classes (`modal-fullscreen-sm-down` through `modal-fullscreen-xxl-down`) to control when the modal should expand to fullscreen based on viewport width. This is particularly useful for complex interfaces that benefit from maximum screen real estate on smaller devices.

Responsive Fullscreen
Loading...
Responsive Fullscreen
Loading...
`ESC`

###### Quick Links

###### Dashboard

Analytics Overview

###### Profile

View your profile

###### Settings

Manage preferences

###### Help Center

Get support

###### Recent Searches

Analytics Dashboard User Settings Email Templates