Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Example Code:

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Modal options	Class	Description
Background modal color	.bg-*	Use any template color from COLOR PALETTE that you like to use for modal background.
Vertically centered	.modal-dialog-centered	Add .modal-dialog-centered to .modal-dialog to vertically center the modal.
Modal sizes	.modal-[xl/lg/sm/xs]	Different sizes of modal that can be used for different examples.

Refer following links for usage:

Type	URL
Bootstrap Page	https://getbootstrap.com/docs/4.1/components/modal/
Template Page	https://pixinvent.com/demo/convex-bootstrap-admin-dashboard-template/demo-1/components-modals.html