Bootstrap Modals

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

Basic Bootstrap 5 Modal

Steps to create bootstrap model:

Step1: Assign modal container to .modal and data attribute data-bs-backdrop="static"
Step 2: Assign .modal-dialog to the immediate child of modal container.
Step 3:Assign .modal-content to the immediate child of element(<div>) having .modal-dialog.
Step 4:Please keep in mind that .modal-content element consist of modal header,body and footer.
Step 5: 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.
Step 6:Put all the content inside modal body having .modal-body
Step 7 :Model footer is defined by the .modal-footer and it has consist of close button and other links.
Step 8: At the end, assign modal id to 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" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <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

Boostrap 5 Modal Animation

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

General Syntax

      <!-- Fading modal -->
<!-- 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" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <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 scrollable modal, add .modal-dialog-scrollable to the .modal-dialog.

General Syntax

      <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" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <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">
       <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

Vertically Centered Modal

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

General Syntax

      <!-- Button trigger modal -->
<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" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <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">
        <p>This is model body content section.</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 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

Note: 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

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

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS