Bootstrap Alerts

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


Examples

  
  <div class="alert alert-primary text-sm" role="alert">
      <strong>Primary!</strong> This is a primary alert—check it out!
  </div>
  
  <div class="alert alert-secondary text-sm" role="alert">
      <strong>Secondary!</strong> This is a secondary alert—check it out!
  </div>
  
  <div class="alert alert-info text-sm" role="alert">
      <strong>Info!</strong> This is a info alert—check it out!
  </div>
  
  <div class="alert alert-success text-sm" role="alert">
      <strong>Success!</strong> This is a success alert—check it out!
  </div>
  
  <div class="alert alert-danger text-sm" role="alert">
      <strong>Danger!</strong> This is a danger alert—check it out!
  </div>
  
  <div class="alert alert-warning text-sm" role="alert">
      <strong>Warning!</strong> This is a warning alert—check it out!
  </div>
  
  <div class="alert alert-light text-sm" role="alert">
      <strong>Light!</strong> This is a light alert—check it out!
  </div>
  
  <div class="alert alert-dark text-sm" role="alert">
      <strong>Dark!</strong> This is a dark alert—check it out!
  </div>
  

With Gradients

  
  <div class="alert bg-gradient-primary text-sm  text-white " role="alert">
      <strong>Primary!</strong> This is a primary alert—check it out!
  </div>
  
  <div class="alert bg-gradient-secondary text-sm  text-white " role="alert">
      <strong>Secondary!</strong> This is a secondary alert—check it out!
  </div>
  
  <div class="alert bg-gradient-info text-sm  text-white " role="alert">
      <strong>Info!</strong> This is a info alert—check it out!
  </div>
  
  <div class="alert bg-gradient-success text-sm  text-white " role="alert">
      <strong>Success!</strong> This is a success alert—check it out!
  </div>
  
  <div class="alert bg-gradient-danger text-sm  text-white " role="alert">
      <strong>Danger!</strong> This is a danger alert—check it out!
  </div>
  
  <div class="alert bg-gradient-warning text-sm  text-white " role="alert">
      <strong>Warning!</strong> This is a warning alert—check it out!
  </div>
  
  <div class="alert bg-gradient-light text-sm  text-dark " role="alert">
      <strong>Light!</strong> This is a light alert—check it out!
  </div>
  
  <div class="alert bg-gradient-dark text-sm  text-white " role="alert">
      <strong>Dark!</strong> This is a dark alert—check it out!
  </div>
  

With Icon

  <div class="text-sm text-white alert bg-gradient-warning" role="alert">
      <span class="alert-icon"><i class="ni ni-like-2"></i></span>
      <span class="alert-text"><strong>Warning!</strong> This is a warning alert—check it out that has an icon too!</span>
  </div>

Dismissing

  
    <div class="alert bg-gradient-primary alert-dismissible text-sm  text-white  fade show" role="alert">
        <span class="alert-icon"><i class="ni ni-like-2"></i></span>
        <span class="alert-text"><strong>Primary!</strong> This is a primary alert—check it out!</span>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
            <i class="fas fa-times"></i>
        </button>
    </div>
  
    <div class="alert bg-gradient-secondary alert-dismissible text-sm  text-white  fade show" role="alert">
        <span class="alert-icon"><i class="ni ni-like-2"></i></span>
        <span class="alert-text"><strong>Secondary!</strong> This is a secondary alert—check it out!</span>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
            <i class="fas fa-times"></i>
        </button>
    </div>
  
    <div class="alert bg-gradient-info alert-dismissible text-sm  text-white  fade show" role="alert">
        <span class="alert-icon"><i class="ni ni-like-2"></i></span>
        <span class="alert-text"><strong>Info!</strong> This is a info alert—check it out!</span>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
            <i class="fas fa-times"></i>
        </button>
    </div>
  
    <div class="alert bg-gradient-success alert-dismissible text-sm  text-white  fade show" role="alert">
        <span class="alert-icon"><i class="ni ni-like-2"></i></span>
        <span class="alert-text"><strong>Success!</strong> This is a success alert—check it out!</span>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
            <i class="fas fa-times"></i>
        </button>
    </div>
  
    <div class="alert bg-gradient-danger alert-dismissible text-sm  text-white  fade show" role="alert">
        <span class="alert-icon"><i class="ni ni-like-2"></i></span>
        <span class="alert-text"><strong>Danger!</strong> This is a danger alert—check it out!</span>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
            <i class="fas fa-times"></i>
        </button>
    </div>
  
    <div class="alert bg-gradient-warning alert-dismissible text-sm  text-white  fade show" role="alert">
        <span class="alert-icon"><i class="ni ni-like-2"></i></span>
        <span class="alert-text"><strong>Warning!</strong> This is a warning alert—check it out!</span>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
            <i class="fas fa-times"></i>
        </button>
    </div>
  
    <div class="alert bg-gradient-light alert-dismissible text-sm  text-dark  fade show" role="alert">
        <span class="alert-icon"><i class="ni ni-like-2"></i></span>
        <span class="alert-text"><strong>Light!</strong> This is a light alert—check it out!</span>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
            <i class="fas fa-times"></i>
        </button>
    </div>
  
    <div class="alert bg-gradient-dark alert-dismissible text-sm  text-white  fade show" role="alert">
        <span class="alert-icon"><i class="ni ni-like-2"></i></span>
        <span class="alert-text"><strong>Dark!</strong> This is a dark alert—check it out!</span>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
            <i class="fas fa-times"></i>
        </button>
    </div>