Upgrade to Pro
Get access to all features
- Advanced Analytics
- Team Collaboration
- API Access
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.
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.
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.
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.
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.
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.
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.
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.
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.