@coreui/ajax/AJAX_Full_Project_GULP/src/views/notifications/alerts.html

Open Source Bootstrap Admin Template

<div class="animated fadeIn">
  <div class="row">
    <div class="col-lg-6">
      <div class="card">
        <div class="card-header">
          <i class="fa fa-align-justify"></i> Bootstrap Alerts
          <div class="card-actions">
            <a href="http://coreui.io/docs/components/bootstrap-alerts/" target="_blank">
              <small class="text-muted">docs</small>
            </a>
          </div>
        </div>
        <div class="card-body">
          <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>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="card">
        <div class="card-header">
          <i class="fa fa-align-justify"></i> Bootstrap Alerts
          <small>use
            <code>.alert-link</code> to provide links</small>
        </div>
        <div class="card-body">
          <div class="alert alert-primary" role="alert">
            This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
          </div>
          <div class="alert alert-secondary" role="alert">
            This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
          </div>
          <div class="alert alert-success" role="alert">
            This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
          </div>
          <div class="alert alert-danger" role="alert">
            This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
          </div>
          <div class="alert alert-warning" role="alert">
            This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
          </div>
          <div class="alert alert-info" role="alert">
            This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
          </div>
          <div class="alert alert-light" role="alert">
            This is a light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
          </div>
          <div class="alert alert-dark" role="alert">
            This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
          </div>
        </div>
      </div>
    </div>
    <!--/.col-->
  </div>
  <!--/.row-->
  <div class="row">
    <div class="col-lg-6">
      <div class="card">
        <div class="card-header">
          <i class="fa fa-align-justify"></i> Bootstrap Alerts
          <small>additional content</small>
        </div>
        <div class="card-body">
          <div class="alert alert-success" role="alert">
            <h4 class="alert-heading">Well done!</h4>
            <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
            <hr>
            <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
          </div>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-lg-6">
      <div class="card">
        <div class="card-header">
          <i class="fa fa-align-justify"></i> Bootstrap Alerts
          <small>dismissing</small>
        </div>
        <div class="card-body">
          <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <strong>Holy guacamole!</strong> You should check in on some of those fields below.
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
        </div>
      </div>
    </div>

  </div>
  <!--/.row-->
</div>