Bootstrap 4 Modal

The Modal is a component of Bootstrap 4, which is a dialog box or pop-up window. The modals are used to provide information or warning to the user, such as give information about the session time out or ask for confirmation about critical actions before proceeding to the next step.

The bootstrap 4 modal appears at the top of the web page. The modal is created by using the Bootstrap modal plugin.

Basic Modal – The basic modal consists of a header, message body, and footer with some action buttons. The header is used to describe the title of the dialog box, the message body is used for the description, and the footer consists of the action button (such as a close button) which is used to perform the task.

Example

Output

Bootstrap 4 Modal

Add Animation – You can also add the animation to the modal with the help of Bootstrap 4. Bootstrap allows you to add the fade in and fade out effect to your modal to make it more stylish and elegant. To add animation to your modal, add .fade class along with the .modal class to the <div> element.

Example

Output

Click on the Open modal button to see the effect.

Bootstrap 4 Modal
Bootstrap 4 Modal

Modal Size – Bootstrap 4 allows you to change the size of the modal as per your choice. You can create the modal in different sizes, such as small, large, and extra-large. 

  • To create a modal smaller than the default size, add the .modal-sm class along with the .modal-dialog class to the <div> element.

Example

Output

Bootstrap 4 Modal
  • To create a modal larger than the default size, add the .modal-lg class along with the .modal-dialog class to the <div> element.

Example

Output

Bootstrap 4 Modal
  • To create an extra large modal, add the .modal-xl class along with the .modal-dialog class to the <div> element.

Example

Output

Bootstrap 4 Modal

Centered Modal – Bootstrap 4 offers some classes that help to customize the position of the modal. You can set the position of the modal in the center of the web page either horizontally or vertically. To create a vertically centered modal, add .modal-dialog-centered class along with the .modal-dialog class to the <div> element.

Example

Output

Bootstrap 4 Modal

Scrolling Modal – The scrolling modal is used when you want to add large information to the message body such as paragraph then you need to add the scroll bar to your modal. In this, you need to scroll the web page to see the remaining content of the modal.

Example

Output

Bootstrap 4 Modal

You can also add a large amount of text without extending the size of the dialog box. In this,  scroll is applicable inside the modal only not on the web page. To create a scrolling modal, add .modal-dialog-scrollable class along with the .modal-dialog class to the <div> element.

Example

Output

Bootstrap 4 Modal