Creating and Using Bootstrap Modals

The Modal component of Bootstrap is a helpful tool for showcasing interactive content like login forms, image galleries, or alerts. Modals are essentially dialog boxes that pop up over the main content and require user interaction to close. They can be activated using different events such as button clicks, links, or JavaScript functions.

Key Features

Bootstrap modals offer customizable sizes, animations, backdrops, and positioning. They support various types of content and can be triggered by different events. They are also accessible to all users and can be further enhanced by adding ARIA attributes and focus management.

Usage Classes

• modal: Base class for creating a modal dialog;
• modal-dialog: Container for the modal content;
• modal-content: Wrapper for the modal header, body, and footer;
• modal-header: Container for the modal title and optional close button;
• modal-title: Styles the title of the modal;
• modal-body: Container for the main content of the modal;
• modal-footer: Container for buttons or additional content in the modal footer;
• fade: Applies a fade-in animation to the modal for smooth transitions;
• modal-dialog-centered: Centers the modal vertically within the viewport;
• modal-static: Prevents the modal from being dismissed by clicking outside or pressing the Escape key.

Example 1: Basic Modal

Example 2: Animated Modal