Overview
Anim
Layout
Forms
Components
Accordion
Alerts
Avatar
Badge
Breadcrumb
Buttons
Button group
Close button
Calendar
Card
Caret
Carousel
Classified
Dropdowns
List
Loader
Modal
Navbar
Nav | Pills
Nav | Tabs
Pagination
Placeholders
Progress
Rating
Scrollbar
Sidenav
Spinners
Tables
Timeline
Toasts
Tooltips
TreeView
Utilities

Modal

Modal is a responsive popup used to display extra content. That includes prompts, configurations, cookie consents, etc.

UsageNg Dialog

Basic example

Modal components

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). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.

    <div class="Modal" tabindex="-1" style="position: static; display: block; height: auto;">
      <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-ls-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-sm Btn-secondary" data-ls-dismiss="Modal">Close</button>
            <button type="button" class="Btn Btn-sm Btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>