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 | ✔️ |
