Bootstrap 5 Modal

Bootstrap 5 Modals

Bootstrap 5 modals are a dialog box/popup window that display information or taking information from the user.

Steps to create bootstrap 5 modals:

  • Assign modal container to .modal and data attribute data-bs-backdrop="static"
  • Assign .modal-dialog to the immediate child of modal container.
  • Assign .modal-content to the immediate child of element(<div>) having .modal-dialog.
  • Please keep in mind that .modal-content element consist of modal header, body and footer.
  • Modal header container is consist of .modal-header.Model title is defined by .modal-title.Put close button inside modal header and assign .btn-close and add data attribute data-bs-dismiss="modal" to the button.
  • Put all the content inside modal body having .modal-body
  • Model footer is defined by the .modal-footer and it has consist of close button and other links.
  • At the end, assign modal id to external button's data attribute data-bs-target="#modalId".Add other data attribute data-bs-toggle="modal" to the button.

Let us understand bootstrap modal concept with the help of an example.

Example

Source Code

Try it now

Code Explanation

Note:Follow the above mention concept to create a bootstrap model.

Bootstrap 5 Modal Animation

To create modal animation ,use .fade class to modal container that has contains class .modal.

Source Code

Try it now

Code Explanation

Note:Follow the above mention concept to create a bootstrap animated model.

Modal With Scrollbar

To create scrollable modal,add .modal-dialog-scrollable to the .modal-dialog.

Source Code

Try it now

Code Explanation

Note:Follow the above mention concept to create a bootstrap model scrollbar.

Vertically Centered Modal

To create vertically centred modal,add .modal-dialog-centered to the .modal-dialog.

Source Code

Try it now

Code Explanation

Note:Follow the above mention concept to create a bootstrap centered model with scrollbar.

Bootstrap Modal Size

Bootstrap modal size can be controlled by adding .modal-sm for small modal size and .modal-lg class for large modal size to the <div> that contains class .modal-dialog.

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note: To create small modal size assign.modal-sm to the <div> having class .modal-dialog while to create large modal assign .modal-lg to the <div> having class .modal-dialog.

Centered Modal

To create modal vertical as well as horizontally center within the page, use .modal-dialog-centered class to the <div > that contain class .modal-dialog.

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note: Centered modal can be created by assigning .modal-dialog-centered class to the <div> that contain class .modal-dialog.

Online Test / Quiz