Bootstrap Modal Plugin
Bootstrap Modal is a dialog box or popup that appears on top of the page content. It is commonly used for alerts, forms, login/signup dialogs, or additional information.
Works in Bootstrap 3, 4, and 5, with slight differences in classes.
✅ Basic Modal Structure
Key Points:
.modal→ Main modal container..fade→ Adds fade-in/out animation..modal-dialog→ Wraps modal content..modal-content→ Contains header, body, and footer..modal-header→ Title and close button..modal-body→ Content section..modal-footer→ Action buttons.data-toggle="modal"&data-target="#myModal"→ Trigger modal with a button.data-dismiss="modal"→ Closes the modal.
🔹 Modal Sizes
| Class | Description |
|---|---|
.modal-lg | Large modal |
.modal-sm | Small modal |
| No size class | Default size |
Example:
🔹 Modal Without Footer
🔹 Centered Modal (Bootstrap 4/5)
.modal-dialog-centeredvertically centers the modal on the screen.
✔ Summary of Modal Features
| Feature | Supported |
|---|---|
| Triggered by button/link | ✔️ |
| Header, body, footer | ✔️ |
| Close button & dismiss | ✔️ |
| Small, large, default sizes | ✔️ |
| Fade-in animation | ✔️ |
| Centered vertically | ✔️ |
| Can contain forms, images, videos, custom HTML | ✔️ |
