Bootstrap Modal

The Modal components are useful in situations like, when you need to bring the users attention to some message or a popup.

These are basically dialog boxes/popup windows that are displayed on top of the page.

Creating a Bootstrap Modal

The code below illustrates how modals can be created using Bootstrap

Add animation in Bootstrap Modal

You can add some animation by using the .fade class.

This will add a fading effect when the modal is opened or closed.

See the code below:

Bootstrap Modal Size

The size of the modals can be regularized by to contextual classes:

  • .modal-sm: Small modals
  • .modal-lg: Large modals.

You can add these size classes to the <div> element with class .modal-dialog.

See the code below

Default modals size is medium.

Bootstrap Centered Modal

The .modal-dialog-centered can make the modal vertically and horizontally centred:

Bootstrap Modal Classes

Here’s the list of contextual classes for the Bootstrap Modal element:

  • .modal: Basic contextual class for creating a Bootstrap modal
  • .modal-content: For the modal styling with border, bg-color, header, body and footer etc.
  • .modal-dialog-centered: For horizontal and vertically centred modals
  • .modal-header: For the modal header
  • .modal-body: Styles the body for the modal
  • .modal-footer: Styles the footer part for the modal. By default, the footer area is right aligned. However, you can change the alignement by using the classes justify-content-start and justify-content-center.
  • .modal-sm: Sizing modal to small
  • .modal-lg: Sizing modal to large
  • .fade: Adding some animation or transition effect to the modal. It makes the modal fade in and out.

Bootstrap Modal Methods

Below are listed some useful methods for Bootstrap Modal element:

  • .modal(options): It can activate the content as a modal. The options that can be used with this method are:
    • backdrop: Takes boolean values or the string “static”. Default value is true. Specifies the overlay (The background screen/page) for the modal.
    • keyboard: Takes boolean values. Default value is true. If true, the modal can be closed using the Esc key on the keyboard.
    • show: Takes boolean values. Default value is true. If true, the modal is shown when initialized.
  • .modal(“toggle”):To toggle the modal
  • .modal(“show”): To open the modal
  • .modal(“hide”) : To hide the modal

Bootstrap Modal Events

Below is the list of the different events related to the Bootstrap Modal:

  • bs.modal: Event of the modal about to be shown
  • bs.modal: Event of the modal be fully shown after the CSS transitions have also been completed.
  • bs.modal: Event of the modal about to be hidden
  • bs.modal: Event of the modal fully hidden after all the transitions have also been completed.