Back to Bootstrap HubPractice BootstrapInterview Bootstrap

Nearby lessons

24 of 39
BS5 NavbarBS5 CarouselBS5 ModalBS5 TooltipBS5 Popover

💬 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.

Example02
Loading editor…

📏 Modal Sizes (.modal-lg, .modal-sm)

.modal-lg – wider modal. .modal-sm – narrower. Add to .modal-dialog.

Example03
Loading editor…

📐 Centered Modal (.modal-dialog-centered)

.modal-dialog-centered – vertically centers the dialog. Add to .modal-dialog.

Example04
Loading editor…

✅ 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 Questions
Progress: 0 / 3