”;
What is a modal?
A modal in bootstrap is a dialog box/popup window that is displayed on top of the current page. It is used to display important information or ask the user for confirmation before taking a specific action.
Modal is a core UI component of bootstrap and can be easily customized using built-in CSS classes and JavaScript methods.
| class | description |
|---|---|
| .modal | This is used to define the basic structure of the modal |
| .modal-header | This is used to define the header section of the modal |
| .modal-body | This is used to define the body section of the modal |
| .modal-footer | This is used to define the footer section of the modal |
| .fade | This is used to add a fade effect to the modal |
| .modal-dialog | This is used to customize the size and position of the modal |
| .modal-content | This is used to customize the background color and border of the modal |
| .modal-title | This is used to customize the title of the modal |
| .close | This is used to add a close button to the modal |
Some of the examples of the modals are as follows:
| Example | Description | Download link |
|---|---|---|
| Basic static modal | This example shows a static modal. | Download |
| Scrollable modal | This example shows a scrollable modal. | Download |
| Modal with static backdrop | This example shows a modal with static backdrop. | Download |
| Modal with tooltip | This example shows a modal with a tooltip. | Download |
| Modal with popover | This example shows a modal with a popover. | Download |
| Modal with grid | This example shows a modal with grid. | Download |
| Animated modal | This example shows a modal with animation. | Download |
Advertisements
”;