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 Modal

The code below illustrates how modals can be created using Bootstrap

Add animation

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:

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.

Centered Modal

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

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.

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

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.