Bootstrap 4 modal

Bootstrap 4 Modal

Bootstrap 4 modal is a dialog box/popup window that provides either the most important information to the user or taking important information from the user.

Example

Click To See Modal Example

Modals are built with HTML, CSS, and JavaScript. It has mainly three section namely the header, body and footer. Each has its own role and importance.

General Syntax

Try it now

Source Code

Try it now

Remember:In the above example data attributes data-toggle="modal" & data-target="#modalId" is used inside button.Assign modal id to the button data attribute (data-target).

Boostrap Modal Animation

To create modal animation ,use .fade class to modal container having .modal class.

Source Code

Try it now

Remember:To animate bootstrap modal,assign.modal to the modal container having .modal.

Bootstrap 4 Modal Size

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

General Syntax

Try it now

Source Code

Try it now

Remember:In the above example,.modal-sm & .modal-lg is assigned to the the <div> having .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

Remember:In the above example,.modal-dialog-centered is assigned to the the <div> having .modal-dialog.

Online Test / Quiz