---
title: "Alerts"
group: bootstrap-ui
---
<div class="row">
  <div class="col-sm-12 col-lg-10 offset-lg-1">
    <div class="row">
      <div class="col-12 col-sm-6">
        <h5 id="Basic-alerts">Basic alerts</h5>
        <div class="mb-4">
          <div>
            <div class="alert alert-primary fade show" role="alert">This is a primary alert — check it out!</div>
            <div class="alert alert-secondary fade show" role="alert">This is a secondary alert — check it out!</div>
            <div class="alert alert-success fade show" role="alert">This is a success alert — check it out!</div>
            <div class="alert alert-danger fade show" role="alert">This is a danger alert — check it out!</div>
            <div class="alert alert-warning fade show" role="alert">This is a warning alert — check it out!</div>
            <div class="alert alert-info fade show" role="alert">This is a info alert — check it out!</div>
            <div class="alert alert-light fade show" role="alert">This is a light alert — check it out!</div>
            <div class="alert alert-dark fade show" role="alert">This is a dark alert — check it out!</div>
          </div>
        </div>
        <h5 id="Additional-content">Additional content</h5>
        <div class="mb-4">
          <div>
            <div class="alert alert-success fade show" 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>
      <div class="col-12 col-sm-6">
        <h5 id="Link-color">Link color</h5>
        <div class="mb-4">
          <div>
            <div class="alert alert-primary fade show" 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 fade show" 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 fade show" 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 fade show" 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 fade show" 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 fade show" 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 fade show" 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 fade show" 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>
        <h5 id="Dismissing">Dismissing</h5>
        <div class="mb-4">
          <div class="alert alert-info alert-dismissible fade show" role="alert"><button type="button" class="close" aria-label="Close" data-dismiss="alert"><span aria-hidden="true">×</span></button>I am an alert and I can be dismissed!</div>
        </div>
        <h5 id="Alerts-without-fade">Alerts without fade</h5>
        <div class="mb-4">
          <div>
            <div class="alert alert-primary alert-dismissible show" role="alert"><button type="button" class="close" aria-label="Close" data-dismiss="alert"><span aria-hidden="true">×</span></button>I am a primary alert and I can be dismissed without animating!</div>
          </div>
          <div>
            <div class="alert alert-info alert-dismissible show" role="alert"><button type="button" class="close" aria-label="Close" data-dismiss="alert"><span aria-hidden="true">×</span></button>I am an alert and I can be dismissed without animating!</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>