bootstrap modal centered

---

<!-- Add new modal -->
<div class="modal fade" id="addNoteModal" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-success">
        <h5 class="modal-title text-light" id="exampleModalToggleLabel">Add New Note</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form action="" method="post" class="px-3" id="add-note-form">
          <div class="form-group mb-3">
            <input type="text" name="title" class="form-control form-control-lg" placeholder="Enter title" required>
          </div>
          <div class="form-group mb-3">
            <textarea name="note" class="form-control form-control-lg" placeholder="Write your note here" id="" rows="6"></textarea>
          </div>
          <div class="form-group">
            <input type="submit" id="addNoteBtn" name="submit" value="Add Note" class="btn w-100 btn-success btn-block btn-lg">
          </div>

        </form>
      </div>
      
    </div>
  </div>
</div>
<!-- end of add new modal  -->

---