Bootstrap4 Modal

A modal (Modal) is a child window that is overlaid on the parent window. Typically, the purpose is to display content from a separate source that can include some interaction without leaving the parent window. The child window can provide information interaction, etc.

How to Create a Modal

The following example creates a simple modal effect:

Example

<!-- Button: Used to open the modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open Modal
</button>

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

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Header</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

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

      <!-- Modal Footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>

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

Modal Sizes

We can create a small modal by adding the .modal-sm class, and a large modal by adding the .modal-lg class.

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

Example - Small Modal

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

Example - Large Modal

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