Modals

Simple Modal

Copy
<div class="container py-7">
  <div class="row mt-5">
    <div class="col-sm-3 col-6 mx-auto">
      <!-- Button trigger modal -->
      <button type="button" class="btn bg-gradient-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
        Launch demo modal
      </button>

      <!-- Modal -->
      <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">Your modal title</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              Society has put up so many boundaries, so many limitations on what’s right and wrong that it’s almost impossible to get a pure thought out.
              <br><br>
              It’s like a little kid, a little boy, looking at colors, and no one told him what colors are good, before somebody tells you you shouldn’t like pink because that’s for girls, or you’d instantly become a gay two-year-old.
            </div>
            <div class="modal-footer justify-content-between">
              <button type="button" class="btn bg-gradient-dark mb-0" data-bs-dismiss="modal">Close</button>
              <button type="button" class="btn bg-gradient-primary mb-0">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Notification Modal

Screenshot
modal-2

Modal Form

Screenshot
modal-3

Modal Long Content

Screenshot
modal-4

Modal Signup

Screenshot
modal-5