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

Basic Alert

Use one of the four required contextual classes

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
Bordered Alert

Having a variation with bordered alert without background color.

<div class="alert alert-bordered alert-success" role="alert">...</div>
<div class="alert alert-bordered alert-info" role="alert">...</div>
<div class="alert alert-bordered alert-warning" role="alert">...</div>
<div class="alert alert-bordered alert-danger" role="alert">...</div>
Solid Colored Alert

Having a variation of using solid background color alert.

<div class="alert alert-solid alert-success" role="alert">...</div>
<div class="alert alert-solid alert-info" role="alert">...</div>
<div class="alert alert-solid alert-warning" role="alert">...</div>
<div class="alert alert-solid alert-danger" role="alert">...</div>
Alert With Icons

Using icons inside an alert box.

<div class="alert alert-success" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  <div class="d-flex align-items-center justify-content-start">
    <i class="icon ion-ios-checkmark alert-icon tx-size-32 mg-t-5 mg-xs-t-0"></i>
    <span><strong>Well done!</strong> Successful alert message.</span>
Bigger Alerts

Having a bigger size to emphasize an alert

<div class="alert alert-danger alert-bordered pd-y-20" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  <div class="d-flex align-items-center justify-content-start">
    <i class="icon ion-ios-close alert-icon tx-size-52 tx-danger mg-r-20"></i>
      <h5 class="mg-b-2 tx-danger">Oh snap! ...</h5>
      <p class="mg-b-0 tx-gray">Neque porro quisquam est...</p>
Growl Messages

A collection of growl messages that appear in any corner of the window.

© 2017. Blockbox UI. All Rights Reserved. Developed by ThemePixels