Alert

<div class="alert alert-primary login-box-top" role="alert"> A simple primary alert—check it out!</div>
              

<div class="alert alert-primary alert-primary-gradient" role="alert"> A simple primary alert—check it out!</div>
<div class="alert alert-secondary alert-secondary-gradient" role="alert"> A simple secondary alert—check it out!</div>
<div class="alert alert-success alert-success-gradient" role="alert"> A simple success alert—check it out!</div>
<div class="alert alert-danger alert-danger-gradient" role="alert"> A simple danger alert—check it out!</div>
<div class="alert alert-warning alert-warning-gradient" role="alert"> A simple warning alert—check it out!</div>
<div class="alert alert-info alert-info-gradient" role="alert"> A simple info alert—check it out!</div>
<div class="alert alert-light alert-light-gradient" role="alert"> A simple light alert—check it out!</div>
<div class="alert alert-dark alert-dark-gradient" role="alert"> A simple dark alert—check it out!</div>
           

<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p class="text-white">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 text-white">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
           

<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"></span> </button>
</div>
                   

<div class="alert alert-primary" role="alert"> A simple 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"> A simple 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"> A simple 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"> A simple 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"> A simple 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"> A simple 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"> A simple 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"> A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div>