magen-iot-admin Responsive Bootstrap 4 Admin Template

Alerts

Basic Alert

Use one of the four required contextual classes

Well done! You successfully read this important alert message.

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

Warning! Better check yourself, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

Source Code

<div class="alert alert-success" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong class="d-block d-sm-inline-block-force">Well done!</strong> You successfully read this important alert message.
</div><!-- alert -->

Alert With Icons

Using icons inside an alert box.

Well done! Successful alert message.

Heads up! This alert needs your attention.

Warning! Better check yourself.

Oh snap! Error alert message.

Source Code

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

Bigger Alerts

Having a bigger size to emphasize an alert

Well done! You successfully read this important alert message.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...

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

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...

Warning! Better check yourself, you're not looking too good.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...

Oh snap! Change a few things up and try submitting again.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...

Source Code

<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">&times;</span>
  </button>
  <div class="d-flex align-items-center justify-content-start">
    <i class="icon ion-ios-close alert-icon tx-52 tx-danger mg-r-20"></i>
    <div>
      <h5 class="mg-b-2 tx-danger">Oh snap! Change a few things up and try submitting again.</h5>
      <p class="mg-b-0 tx-gray">Neque porro quisquam est, qui dolorem ipsum...</p>
    </div>
  </div><!-- d-flex -->
</div><!-- alert -->