Modal Dialogs
Overlay dialog windows for important content and interactions
1 Basic Modal
The simplest modal with header, body, and footer.
Modal Structure:
<div class="modal fade" id="basicModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">...</div>
<div class="modal-body">...</div>
<div class="modal-footer">...</div>
</div>
</div>
</div>
💡 Key Concept:
Modals require three nested layers:
.modal
→
.modal-dialog
→
.modal-content
2 Modal Sizes
Bootstrap offers four modal sizes using classes on
.modal-dialog
.
Small
.modal-sm
300px max width
Default
(no class)
500px max width
Large
.modal-lg
800px max width
Extra Large
.modal-xl
1140px max width
3 Scrolling Modals
When content is long, modals can scroll in two ways.
By default, the entire page scrolls when modal content is long.
Add
.modal-dialog-scrollable
to scroll only the modal body.
4 Positioning & Fullscreen
Vertically centered with
.modal-dialog-centered
Covers entire screen with
.modal-fullscreen
Fullscreen only on mobile devices
5 Practical Example: Image Gallery
Use modals to create an image gallery with detailed information.
🎯 Key Takeaways About Modals
- Automatic backdrop: Dark overlay behind the modal
- Focus management: Focus moves to modal when opened
- Escape to close: Press Escape key to close the modal
- Accessibility: Includes ARIA attributes automatically
- Responsive: Sizes adapt to different screen sizes