DashByte - Premium Dashboard Template

Components

Modals

Add dialogs to your site for lightboxes, user notifications, or completely custom content. Read the Official Bootstrap Documentation for a full list of instructions and other options.

Basic Example

Below is a static modal example (meaning its position and display have been overridden). Included are the modal header, modal body (required for padding), and modal footer (optional).

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Vertically Centered

Display modal in the center of the screen by adding .modal-dialog-centered to .modal-dialog.

Vertically Centered Modal

<div class="modal-dialog modal-dialog-centered">
  ...
</div>

Static Backdrop

When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.

Launch static backdrop modal

<div class="modal fade" id="modalStatic" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  ...
</div>

Fullscreen Modal

Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a .modal-dialog.

Launch full screen modal

<div class="modal-dialog modal-fullscreen">
  ...
</div>

Optional Sizes

Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog.

Extra large modal

Large modal

Small modal

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

Remove Animation

For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.

No animation modal

<div class="modal" id="modalNoAnimate" tabindex="-1" aria-hidden="true">
  ...
</div>

Shaira Diaz