<button

  type="button"

  class="btn btn-primary"

  data-mdb-toggle="modal"

  data-mdb-target="#exampleModal"

  data-mdb-whatever="@mdo"

>

<i class="fas fa-plus"></i>

</button>

<button

  type="button"

  class="btn btn-primary"

  data-mdb-toggle="modal"

  data-mdb-target="#exampleModal"

  data-mdb-whatever="@fat"

>

  Open modal for @fat

</button>

<button

  type="button"

  class="btn btn-primary"

  data-mdb-toggle="modal"

  data-mdb-target="#exampleModal"

  data-mdb-whatever="@getbootstrap"

>

  Open modal for @getbootstrap

</button>

​

<div

  class="modal fade"

  id="exampleModal"

  tabindex="-1"

  aria-labelledby="exampleModalLabel"

  aria-hidden="true"

>

  <div class="modal-dialog">

    <div class="modal-content">

      <div class="modal-header">

        <h5 class="modal-title" id="exampleModalLabel">New message</h5>

        <button

          type="button"

          class="btn-close"

          data-mdb-dismiss="modal"

          aria-label="Close"

        ></button>

      </div>

      <div class="modal-body">

        <form>

          <div class="mb-3">

            <label for="recipient-name" class="col-form-label">Recipient:</label>

            <input type="text" class="form-control" id="recipient-name" />

          </div>

          <div class="mb-3">

            <label for="message-text" class="col-form-label">Message:</label>

            <textarea class="form-control" id="message-text"></textarea>

          </div>

        </form>

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">

          Close

        </button>

        <button type="button" class="btn btn-primary">Send message</button>

      </div>

    </div>

  </div>

</div>