<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 d-block">
            <div class="d-flex">
                <h3 class="modal-title" id="exampleModalLabel">Modal title</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <h5 class="modal-title">Modal Sub-Title</h5>
        </div>
        <div class="modal-body">
          <p>
              Modal body content goes here
          </p>
        </div>
        <div class="modal-footer justify-content-between">
          <p>This is the text in the footer. </p>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>