Bootstrap 5 Modal Components

A website can have dialogues added for lightboxes, user notifications, or entirely unique content by using Bootstrap modals. A modal is made up of components like the dialog, content, header, title, body, and footer. A modal can be used to implement a lot of utilities like showing a message or popping open the logging-in portal.

Bootstrap 5 Modal Components: To create a modal you will need multiple components, like a header, body, footer, etc. Each component has it's own class and all the components that can be used to create a modal are described below with the class.

• Modal: To create a modal we need to use the basic class of .modal first.
• Modal Dialog: It encloses the total modal dialog box to create a dialog use .modal-dialog class.
• Modal Content: The .modal-content class is used to put the content in the modal, which contains the header, title, body & footer(optional).
• Modal Header: The .modal-header class specifies the header that holds the title part, closing button, or maybe an avatar or image too.
• Modal Title: The modal header contains the title of the modal to put the modal we need to use the .modal-title class
• Modal Body: This is one of the components in modal, to put a body in you need to use the .modal-body class.
• Modal Footer(Optional): The .modal-footer class specifies the total footer that holds the control buttons which might include closing buttons or submit buttons or maybe saving changes button.

Syntax:

<div class="modal">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <h5 class="modal-title">
 <!-- Modal title goes Here --!>
 </h5>
 </div>
 <div class="modal-body">
 <!-- Modal body text goes here --!>
 </div>
 <div class="modal-footer">
 <!-- Modal Footer text goes here --!>
 </div>
 </div>
 </div>
</div>

Example 1: The code below demonstrates how we can use the different components of a modal.

Output:

Example 2: The code below demonstrates how we can use the different components of a modal and also add dynamic heights to a modal using jQuery. 

Note: Here in this example, we used display: none; property, .d-none class will not work in this case

Output:

Reference: https://getbootstrap.com/docs/5.0/components/modal/#modal-components