Bootstrap Modal

Bootstrap modal is a dialog box/popup window that displays information or takes information from the user.

Steps to create a 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 the .modal-content element consists of the 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 the modal body having .modal-body
Model footer is defined by the .modal-footer and it has consist of a close button and other links.
At the end, assign a modal ID to the external button's data attribute data-bs-target="#modalId".Add other data attribute data-bs-toggle="modal" to the button.

General Syntax

      <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal" id="staticBackdrop" data-bs-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>This is model body content.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

Try it now

Bootstrap 5 Modal Animation

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

Source Code

          <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>This is model body content.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

Try it now

Modal With Scrollbar

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

Source Code

          <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop2">
  Launch static backdrop modal with scrollbar
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop2" data-bs-backdrop="static">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Write down modal body content.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

Try it now

Vertically Centered Modal

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

Source Code

          <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop3">
  Launch static backdrop modal with scrollbar
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop3" data-bs-backdrop="static" >
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Here, Write down modal body content.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

Try it now

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

      <div class="modal-dialog modal-sm"></div>
<div class="modal-dialog modal-lg"></div>

Try it now

Source Code

          <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal" id="staticBackdrop" data-bs-backdrop="static" >
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>This is model body content.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

Try it now

Code Explanation

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

      <div class="modal-dialog modal-dialog-centered"> </div>

Try it now

Source Code

          <div class="container mt-3 text-center">
  <h2 class="text-center">Bootstrap Centered Model</h2>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
    Launch static backdrop modal
  </button>
  <!-- Modal -->
  <div class="modal" id="staticBackdrop" data-bs-backdrop="static" >
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>This is model body content.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Understood</button>
        </div>
      </div>
    </div>
  </div>
</div>
<!--/container-->

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

Question set 1

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4