Nearby lessons
24 of 39💬 BS5 Modal
📌 What Are Bootstrap 5 Modals?
Modals are dialog overlays. The modal has .modal .fade and an id. Trigger: data-bs-toggle="modal" and data-bs-target="#modalId". Inside use .modal-dialog, .modal-content, then .modal-header, .modal-body, .modal-footer. Requires Bootstrap’s JavaScript.
🪟 Basic Modal (.modal, .modal-dialog, .modal-content, .modal-header, .modal-body, .modal-footer)
.modal .fade – overlay and fade-in. .modal-dialog – centers the box. .modal-content – the box (border, shadow). .modal-header – top bar with title and close. .modal-body – main content. .modal-footer – bottom buttons. .btn-close with data-bs-dismiss="modal" closes the modal.
📏 Modal Sizes (.modal-lg, .modal-sm)
.modal-lg – wider modal. .modal-sm – narrower. Add to .modal-dialog.
📐 Centered Modal (.modal-dialog-centered)
.modal-dialog-centered – vertically centers the dialog. Add to .modal-dialog.
✅ Modal Best Practices
- Use aria-labelledby and aria-hidden on the modal for accessibility.
- Close button: .btn-close with data-bs-dismiss="modal".
- Use .modal-lg or .modal-sm on .modal-dialog for size.
🧠 Test Your Knowledge
3 QuestionsProgress: 0 / 3
Keep Going!BS5 Tooltip