Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Modals in Bootstrap 5
Modals: Flexible dialog prompts with minimum required functionality and smart defaults.
Basic Modal
Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
<!-- Trigger Button -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch modal
</button>
<!-- Modal Structure -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Modal body text goes here.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>Modal Sizes
<!-- Modal Sizes --> <div class="modal-dialog modal-sm"> <!-- Small --> <div class="modal-dialog modal-lg"> <!-- Large --> <div class="modal-dialog modal-xl"> <!-- Extra large --> <div class="modal-dialog modal-fullscreen"> <!-- Full screen --> <!-- Responsive full screen --> <div class="modal-dialog modal-fullscreen-sm-down"> <!-- Full screen below sm --> <div class="modal-dialog modal-fullscreen-md-down"> <!-- Full screen below md --> <div class="modal-dialog modal-fullscreen-lg-down"> <!-- Full screen below lg --> <div class="modal-dialog modal-fullscreen-xl-down"> <!-- Full screen below xl --> <div class="modal-dialog modal-fullscreen-xxl-down"> <!-- Full screen below xxl -->
Scrolling Long Content
<!-- Scrollable Modal --> <div class="modal-dialog modal-dialog-scrollable"> <!-- Modal content --> </div>
Vertically Centered Modal
Modal with Form
Static Backdrop Modal
<!-- Static Backdrop Modal --> <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false"> <!-- Modal content --> </div>
Modal with Grid
Toggle Between Modals
JavaScript Methods
Modal JavaScript API
Methods
toggle()- Toggles a modalshow()- Opens a modalhide()- Hides a modalhandleUpdate()- Updates modal positiondispose()- Destroys a modalgetInstance()- Static method to get modal instance
Events
show.bs.modal- Fires immediately when show method is calledshown.bs.modal- Fired when modal is visiblehide.bs.modal- Fires immediately when hide method is calledhidden.bs.modal- Fired when modal is hidden
JavaScript Examples
// Get modal instance
var myModal = document.getElementById('myModal')
var modal = new bootstrap.Modal(myModal)
// Show modal
modal.show()
// Hide modal
modal.hide()
// Toggle modal
modal.toggle()
// Event listeners
myModal.addEventListener('show.bs.modal', function () {
console.log('Modal is about to show')
})
myModal.addEventListener('shown.bs.modal', function () {
console.log('Modal is shown')
})
myModal.addEventListener('hide.bs.modal', function () {
console.log('Modal is about to hide')
})
myModal.addEventListener('hidden.bs.modal', function () {
console.log('Modal is hidden')
})Accessibility
Accessibility Best Practices
- Always include
aria-labelledbypointing to modal title - Use
aria-hidden=&qout;true&qout;on modal when hidden - Manage focus properly (trap focus in modal)
- Include close button with
aria-label - Consider screen reader users when modal opens
- Test keyboard navigation (Tab, Escape)
Best Practices
Do's
- ✅ Use for important actions that need attention
- ✅ Include clear title and actions
- ✅ Make modal responsive
- ✅ Use appropriate modal size for content
- ✅ Test on mobile devices
- ✅ Consider user flow when using multiple modals
Don'ts
- ❌ Don't overuse modals
- ❌ Avoid too much content in modals
- ❌ Don't use for primary navigation
- ❌ Avoid nested modals
- ❌ Don't forget about accessibility
- ❌ Avoid auto-opening modals on page load
Custom CSS Examples
Custom Modal Styles
/* Custom modal styles */
.custom-modal .modal-content {
border: none;
border-radius: 1rem;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
}
.custom-modal .modal-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 1rem 1rem 0 0;
border: none;
}
.custom-modal .modal-header .btn-close {
filter: invert(1);
opacity: 0.8;
}
.custom-modal .modal-header .btn-close:hover {
opacity: 1;
}
.custom-modal .modal-footer {
border-top: 1px solid #dee2e6;
background-color: #f8f9fa;
border-radius: 0 0 1rem 1rem;
}
/* Animation customization */
.modal.fade .modal-dialog {
transform: translate(0, -50px);
transition: transform 0.3s ease-out;
}
.modal.show .modal-dialog {
transform: translate(0, 0);
}
/* Dark theme modal */
.modal-dark .modal-content {
background-color: #343a40;
color: #fff;
}
.modal-dark .modal-header {
background-color: #495057;
border-color: #6c757d;
}
.modal-dark .modal-footer {
background-color: #495057;
border-color: #6c757d;
}