Documentation | Graindashboard UI Kit

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Examples

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success). For inline dismissal, use the alerts jQuery plugin.

Result
HTML

This is a primary alert—check it out!

This is a secondary alert—check it out!

This is a success alert—check it out!

This is a danger alert—check it out!

This is a warning alert—check it out!

This is a info alert—check it out!

This is a light alert—check it out!

This is a dark alert—check it out!


  <div class="alert alert-primary" role="alert">
    This is a primary alert—check it out!
  </div>
  <div class="alert alert-secondary" role="alert">
    This is a secondary alert—check it out!
  </div>
  <div class="alert alert-success" role="alert">
    This is a success alert—check it out!
  </div>
  <div class="alert alert-danger" role="alert">
    This is a danger alert—check it out!
  </div>
  <div class="alert alert-warning" role="alert">
    This is a warning alert—check it out!
  </div>
  <div class="alert alert-info" role="alert">
    This is a info alert—check it out!
  </div>
  <div class="alert alert-light" role="alert">
    This is a light alert—check it out!
  </div>
  <div class="alert alert-dark" role="alert">
    This is a dark alert—check it out!
  </div>

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

Information Enable value-added convergence

Success Visualize vertical interfaces

Alert Monetize B2B portals

Error Streamline customized models

Unimportant Architect ubiquitous deliverables


  <div class="alert bg-primary-darker text-white alert-dismissible d-flex align-items-center p-md-4 mb-2 fade show" role="alert">
    <i class="gd-info-alt icon-text mr-2"></i>
    <p class="mb-0">
      <strong>Information</strong> Enable value-added convergence
    </p>
    <button type="button" class="close" aria-label="Close" data-dismiss="alert">
      <i class="gd-close icon-text icon-text-xs" aria-hidden="true"></i>
    </button>
  </div>

  <div class="alert bg-success text-white alert-dismissible d-flex align-items-center p-md-4 mb-2 fade show" role="alert">
    <i class="gd-check-box icon-text mr-2"></i>
    <p class="mb-0">
      <strong>Success</strong> Visualize vertical interfaces
    </p>
    <button type="button" class="close" aria-label="Close" data-dismiss="alert">
      <i class="gd-close icon-text icon-text-xs" aria-hidden="true"></i>
    </button>
  </div>

  <div class="alert bg-warning text-white alert-dismissible d-flex align-items-center p-md-4 mb-2 fade show" role="alert">
    <i class="gd-flag-alt-2 icon-text mr-2"></i>
    <p class="mb-0">
      <strong>Alert</strong> Monetize B2B portals
    </p>
    <button type="button" class="close" aria-label="Close" data-dismiss="alert">
      <i class="gd-close icon-text icon-text-xs" aria-hidden="true"></i>
    </button>
  </div>

  <div class="alert bg-danger text-white alert-dismissible d-flex align-items-center p-md-4 mb-2 fade show" role="alert">
    <i class="gd-alert icon-text mr-2"></i>
    <p class="mb-0">
      <strong>Error</strong> Streamline customized models
    </p>
    <button type="button" class="close" aria-label="Close" data-dismiss="alert">
      <i class="gd-close icon-text icon-text-xs" aria-hidden="true"></i>
    </button>
  </div>

  <div class="alert bg-primary text-white alert-dismissible d-flex align-items-center p-md-4 mb-0 fade show" role="alert">
    <i class="gd-announcement icon-text mr-2"></i>
    <p class="mb-0">
      <strong>Unimportant</strong> Architect ubiquitous deliverables
    </p>
    <button type="button" class="close" aria-label="Close" data-dismiss="alert">
      <i class="gd-close icon-text icon-text-xs" aria-hidden="true"></i>
    </button>
  </div>

Left bordered

Add icons or any other custom elements.

Result
HTML

Information Enable value-added convergence

Success Visualize vertical interfaces

Alert Monetize B2B portals

Error Streamline customized models


  <div class="alert alert-primary alert-left-bordered border-primary alert-dismissible d-flex align-items-center p-md-4 mb-2 fade show" role="alert">
    <i class="gd-info-alt icon-text text-primary-darker mr-2"></i>
    <p class="mb-0">
      <strong>Information</strong> Enable value-added convergence
    </p>
    <button type="button" class="close" aria-label="Close" data-dismiss="alert">
      <i class="gd-close icon-text icon-text-xs" aria-hidden="true"></i>
    </button>
  </div>

  <div class="alert alert-success alert-left-bordered border-success alert-dismissible d-flex align-items-center p-md-4 mb-2 fade show" role="alert">
    <i class="gd-check-box icon-text text-success mr-2"></i>
    <p class="mb-0">
      <strong>Success</strong> Visualize vertical interfaces
    </p>
    <button type="button" class="close" aria-label="Close" data-dismiss="alert">
      <i class="gd-close icon-text icon-text-xs" aria-hidden="true"></i>
    </button>
  </div>

  <div class="alert alert-warning alert-left-bordered border-warning alert-dismissible d-flex align-items-center p-md-4 mb-2 fade show" role="alert">
    <i class="gd-flag-alt-2 icon-text text-warning mr-2"></i>
    <p class="mb-0">
      <strong>Alert</strong> Monetize B2B portals
    </p>
    <button type="button" class="close" aria-label="Close" data-dismiss="alert">
      <i class="gd-close icon-text icon-text-xs" aria-hidden="true"></i>
    </button>
  </div>

  <div class="alert alert-danger alert-left-bordered border-danger alert-dismissible d-flex align-items-center p-md-4 mb-2 fade show" role="alert">
    <i class="gd-alert icon-text text-danger mr-2"></i>
    <p class="mb-0">
      <strong>Error</strong> Streamline customized models
    </p>
    <button type="button" class="close" aria-label="Close" data-dismiss="alert">
      <i class="gd-close icon-text icon-text-xs" aria-hidden="true"></i>
    </button>
  </div>

Bordered style

Replace the default modifier classes with the .border-* ones to remove all background and colors on any alert.

Result
HTML

Information Enable value-added convergence

Success Visualize vertical interfaces

Alert Monetize B2B portals

Error Streamline customized models


  <div class="alert alert-dismissible border border-primary d-flex align-items-center p-md-4 mb-2 fade show" role="alert">
    <i class="gd-info-alt icon-text text-primary-darker mr-2"></i>
    <p class="mb-0">
      <strong>Information</strong> Enable value-added convergence
    </p>
    <button type="button" class="close" aria-label="Close" data-dismiss="alert">
      <i class="gd-close icon-text icon-text-xs" aria-hidden="true"></i>
    </button>
  </div>

  <div class="alert border border-success text-success alert-dismissible  d-flex align-items-center p-md-4 mb-2 fade show" role="alert">
    <i class="gd-check-box icon-text text-success mr-2"></i>
    <p class="mb-0">
      <strong>Success</strong> Visualize vertical interfaces
    </p>
    <button type="button" class="close" aria-label="Close" data-dismiss="alert">
      <i class="gd-close icon-text icon-text-xs" aria-hidden="true"></i>
    </button>
  </div>

  <div class="alert border border-warning text-warning alert-dismissible d-flex align-items-center p-md-4 mb-2 fade show" role="alert">
    <i class="gd-flag-alt-2 icon-text text-warning mr-2"></i>
    <p class="mb-0">
      <strong>Alert</strong> Monetize B2B portals
    </p>
    <button type="button" class="close" aria-label="Close" data-dismiss="alert">
      <i class="gd-close icon-text icon-text-xs" aria-hidden="true"></i>
    </button>
  </div>

  <div class="alert border border-danger text-danger alert-dismissible d-flex align-items-center p-md-4 mb-2 fade show" role="alert">
    <i class="gd-alert icon-text text-danger mr-2"></i>
    <p class="mb-0">
      <strong>Error</strong> Streamline customized models
    </p>
    <button type="button" class="close" aria-label="Close" data-dismiss="alert">
      <i class="gd-close icon-text icon-text-xs" aria-hidden="true"></i>
    </button>
  </div>

Additional content

Alerts can also contain additional HTML elements like headings, paragraphs and checkboxes.

Result
HTML

Information

This alert needs your attention, but it's not super important.

Deploy B2C mindshare

Evolve front-end infrastructures

Engage real-time ROI

Call to action


  <div class="alert alert-primary alert-left-bordered border-primary alert-dismissible d-flex p-3 p-md-4 mb-0 fade show" role="alert">
    <i class="gd-info-alt icon-text mr-2 mt-1" style="margin-top: 2px;"></i>

    <div>
      <strong class="d-block mb-1">Information</strong>
      <p class="mb-1">This alert needs your attention, but it's not super important.</p>
      <form class="mb-3">
        <div class="form-check position-relative mb-2">
          <input type="checkbox" class="form-check-input d-none" id="check1">
          <label class="checkbox checkbox-xxs form-check-label ml-1" for="check1" data-icon="&#xe936">Deploy B2C mindshare</label>
        </div>

        <div class="form-check position-relative mb-2">
          <input type="checkbox" class="form-check-input invisible" id="check2">
          <label class="checkbox checkbox-xxs form-check-label ml-1" for="check2" data-icon="&#xe936">Evolve front-end infrastructures</label>
        </div>

        <div class="form-check position-relative">
          <input type="checkbox" class="form-check-input invisible" id="check3">
          <label class="checkbox checkbox-xxs form-check-label ml-1" for="check3" data-icon="&#xe936">Engage real-time ROI</label>
        </div>
      </form>
      <a class="btn btn-primary" href="#">Call to action</a>
    </div>
  </div>

JavaScript behavior

For more information, see the official Bootstrap documentation.

Alerts Example #1

John Doe

an hour ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Jane Doe

2 days ago

Vestibulum condimentum lectus dignissim mi suscipit dapibus.

Will Doe

4 days ago

Nulla ut porttitor metus. Vivamus porttitor porttitor ultrices.

Alerts Example #2

Important

just now

Reminder about your Appointment.

New Tweet

an hour ago

John Doe just posted new tweet.

Dropbox

2 days ago

New file has been uploaded

Alerts Example #3

Oops…

Something went wrong

Call to action

Are you sure?

Something went wrong

Apply Cancel

Success message

Something went wrong

Call to action

Info message

Something went wrong

Ok Cancel