7.24. Bootstrap5 modal box

A Modal is a child form that overrides the parent form. Typically, the goal is to display content from a separate source, and there can be some interaction without leaving the parent form. Sub-forms can provide information exchange and so on.

7.24.1. How to create a modal box ¶

The following example creates a simple modal box effect:

Example ¶

      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Open Modal Box
</button>


<!-- Modal Box -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Box Head -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Box Title</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <!-- Modal Box Content -->
      <div class="modal-body">
        Modal Box Content..
      </div>

      <!-- At the bottom of the modal box -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">close</button>
      </div>

    </div>
  </div>
</div>

     

7.24.2. Add Animation ¶

Use .fade class can set the effect that the modal box pops up or closes

Example ¶

      <!-- Add animation effects -->
<div class="modal fade"></div>

<!-- Do not use animation effects -->
<div class="modal"></div>

7.24.3. Modal frame size ¶

We can add .modal-sm class to create a small modal box .modal-lg class can create a large modal box.

The size class is placed in <div> of the element .modal-dialog after class:

Example-small modal box ¶

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

     

Example-large modal box ¶

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

     

Example-extra large modal box ¶

      <div class="modal-dialog modal-xl">

     

Full screen display

Use .modal-fullscreen class allows the modal box to be displayed full screen:

Example-full screen display ¶

      <div class="modal-dialog modal-fullscreen">

     

Use .modal-fullscreen-*-\* class can control the size of the full-screen display:

Class	Description
`.modal-fullscreen-sm-down`	Full screen display below 576px size
`.modal-fullscreen-md-down`	Full screen display below 768px size
`.modal-fullscreen-lg-down`	Full screen display below 992px size
`.modal-fullscreen-xl-down`	Full screen display below 1200px size
`.modal-fullscreen-xxl-down`	Full screen display below 1400px size

7.24.4. Mode frame center display ¶

Use .modal-dialog-centered class can set the horizontal and vertical orientation of the modal box to be centered:

Example ¶

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

     

7.24.5. Modal frame scroll bar ¶

By default, if the modal box contains a lot of content, the page automatically generates a scroll, and the modal box scrolls as the page scrolls:

Example ¶

      <div class="modal-dialog">

     

If we just want to set a scroll bar in the modal box, we can use the .modal-dialog-scrollable class:

Example ¶

      <div class="modal-dialog modal-dialog-scrollable">

     