2.290539 ETH / 22393.74 USD

Examples

Following are basic example of modals, just toggle a working modal demo by clicking the buttons below.

Add .modal-dialog-scrollable to .modal-dialog. for scrollable modal
and Add .modal-dialog-centered to .modal-dialog to vertically center the modal.

For small, large, and extra large modal. use .modal-{sm|lg|xl} to .modal-dialog.

Code Example
    <!-- Default modal -->    <button type="button" class="btn btn-nmw btn-primary" data-bs-toggle="modal" data-bs-target="#defaultModal">        Modal default    </button>    <!-- Modal -->    <div class="modal fade" id="defaultModal" tabindex="-1" aria-labelledby="defaultModalLabel" aria-hidden="true">        <div class="modal-dialog">        <div class="modal-content">            <div class="modal-header">            <h5 class="modal-title" id="defaultModalLabel">Modal title</h5>            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>            </div>            <div class="modal-body">            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem similique earum necessitatibus nesciunt! Quia id expedita asperiores voluptatem odit quis fugit sapiente assumenda sunt voluptatibus atque facere autem, omnis explicabo.</p>            </div>            <div class="modal-footer">            <button type="button" class="btn btn-nmw btn-secondary" data-bs-dismiss="modal">Close</button>            <button type="button" class="btn btn-nmw btn-primary">Save changes</button>            </div>        </div>        </div>    </div>  <!-- Static backdrop 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" data-bs-keyboard="false" 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">          ...        </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>    <!-- Toggle between modals -->  <a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>  <div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">    <div class="modal-dialog modal-dialog-centered">      <div class="modal-content">        <div class="modal-header">          <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>        </div>        <div class="modal-body">          Show a second modal and hide this one with the button below.        </div>        <div class="modal-footer">          <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>        </div>      </div>    </div>  </div>  <div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">    <div class="modal-dialog modal-dialog-centered">      <div class="modal-content">        <div class="modal-header">          <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>        </div>        <div class="modal-body">          Hide this modal and show the first with the button below.        </div>        <div class="modal-footer">          <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>        </div>      </div>    </div>  </div>
Fullscreen Modal

Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a .modal-dialog.

ClassAvailability
.modal-fullscreenAlways
.modal-fullscreen-sm-downBelow 576px
.modal-fullscreen-md-downBelow 768px
.modal-fullscreen-lg-downBelow 992px
.modal-fullscreen-xl-downBelow 1200px
.modal-fullscreen-xxl-downBelow 1400px
Code Example
    <!-- Full screen modal -->    <div class="modal-dialog modal-fullscreen-sm-down">        ...    </div>