Boostrap 4 Modals

Creating Modals:

.modal class along with specific markup for the modal header, body, and footer.

                                      
<div class="modal" tabindex="-1" role="dialog">
   <div class="modal-dialog" role="document">
    <div class="modal-content">
       <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
   </div>
</div>

Modal Triggers:

Modal triggers are elements that, when clicked or interacted with, open the associated modal.

This is typically done using the data-toggle="modal" and data-target="#modalId" attributes.

                                      
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

Modal Sizes:

Bootstrap provides classes to control the size of the modal.

You can use .modal-lg for large modals and .modal-sm for small modals.

                                      
<div class="modal-dialog modal-lg">
    <!-- Modal content -->
</div>

And

                                      
<div class="modal-dialog modal-sm">
    <!-- Modal content -->
</div>