Bootstrap 5 TutorialLesson 25Free preview
BS5 Modal
This lesson is part of Bootstrap · All levels
Summary
A capital is an overlay of dialog that displays information or forms at the top of a page. Bootstrap 5's capital is made up of .modal containing .modal-dialog and .modal-content, with .modal-header, .modal-body, and .modal-footer sections inside. The capital is opened by a button with the data-bs-toggle="modal" and the data-bs-target containing the capital id.
Key points
- Structure: then P1, then P2. (.modal-content)
- .modal-header, .modal-body, .modal-footer share the contents of the dialogue.
- Data-bs-toggle="modal" with data-bs-target opens up capital from the trigger.
- Data-bs-dismiss="modal" on the button to close the capital.
- .modal-lg or .modal-xl set the size and .modal-dialog-centered center the dialog.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.