Shards

You can create modal components using the following example markup:

<!-- Trigger -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch Sample Modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Are you sure?</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Et has debitis vivendo, nam dicant malorum te. Justo moderatius elaboraret cu est, nibh placerat insolens id mea. Suas equidem usu ad, eos ex sint stet alterum. Sit in adhuc propriae contentiones, dicta decore eum an.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Nope</button>
        <button type="button" class="btn btn-primary">Yep</button>
      </div>
    </div>
  </div>
</div>

For more details on the available customisation options we recommend checking the official Bootstrap 4 documentation on this topic.