 |
VOOZH | about |
|
VOOZH | about |
Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. Modals are used to add dialogs to your site for lightboxes, user notifications, or completely custom content. Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.
Syntax:
<div class="modal"> Contents... <div>Example: This example uses shows the working of a modal in Bootstrap 5.
Output :
Tooltips: can be added inside the modal. When modals are closed, tooltips within are also automatically dismissed.
Example:
Output:
Popovers: can be added inside the modal. When modals are closed, popovers within are also automatically dismissed.
Example:
Output:
Using Grids: We can utilize the Bootstrap grid system within a modal by nesting .container-fluid within the .modal-body. Then, use the normal grid system classes as you would anywhere else.
Example:
Output:
Varying modal content: We can trigger the same modal with different data as given below.
Example:
Output:
Optional sizes:
Default max-width of a Bootstrap modal is 500px. Bootstrap provides the option to customize the size of the Modal by using certain classes as described below:
modal-xl: This provides the largest modal size with max-width of 1140px.
Example:
Output:
modal-lg: This provides the large modal size with a max-width of 800px.
Example:
Output:
modal-sm: This provides the largest modal size with a max-width of 300px.
Example:
Output: