Bootstrap 5 Modals

Bootstrap 5 modals are a dialog box/popup window that display information or taking information from the user.

Steps to create 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 .modal-content element consist of 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 modal body having .modal-body
Model footer is defined by the .modal-footer and it has consist of close button and other links.
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.

Let us understand bootstrap modal concept with the help of an example.

Example

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" 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

Code Explanation

Note:Follow the above mention concept to create a bootstrap model.

Bootstrap 5 Modal Animation

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

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" 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

Code Explanation

Note:Follow the above mention concept to create a bootstrap animated model.

Modal With Scrollbar

To create scrollable modal,add .modal-dialog-scrollable 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" 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">
    Lorem ipsum dolor sit amet consectetur adipisicing, elit. Iste natus amet veritatis earum saepe dicta ducimus similique quis quas vel rem alias id sint, voluptates officiis est blanditiis eaque repudiandae nesciunt nam optio labore
    dolore, modi reiciendis.
   </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

Note:Follow the above mention concept to create a bootstrap model scrollbar.

Vertically Centered Modal

To create vertically centred 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" 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">
    Lorem ipsum dolor sit amet consectetur adipisicing, elit. Iste natus amet veritatis earum saepe dicta ducimus similique quis quas vel rem alias id sint, voluptates officiis est blanditiis eaque repudiandae nesciunt nam optio labore
    dolore, modi reiciendis.
   </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

Note:Follow the above mention concept to create a bootstrap centered model with scrollbar.

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

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

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

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

Bootstrap 5 Modals

Example

Source Code

Code Explanation

Bootstrap 5 Modal Animation

Source Code

Code Explanation

Modal With Scrollbar

Source Code

Code Explanation

Vertically Centered Modal

Source Code

Code Explanation

Bootstrap Modal Size

General Syntax

Source Code

Code Explanation

Centered Modal

General Syntax

Source Code

Code Explanation

Online Test / Quiz

Our Tutorials