Accordion

Basic Alerts
Show Code
                    
        <div class="alert alert-primary" role="alert">
        A simple primary alert—check it out!
        </div>
        <div class="alert alert-secondary" role="alert">
        A simple secondary alert—check it out!
        </div>
        <div class="alert alert-success" role="alert">
        A simple success alert—check it out!
        </div>
        <div class="alert alert-danger" role="alert">
        A simple danger alert—check it out!
        </div>
        <div class="alert alert-warning" role="alert">
        A simple warning alert—check it out!
        </div>
        <div class="alert alert-info" role="alert">
        A simple info alert—check it out!
        </div>
        <div class="alert alert-light" role="alert">
        A simple light alert—check it out!
        </div>
        <div class="alert alert-dark" role="alert">
        A simple dark alert—check it out!
        </div>
                    
                  
Outline Alerts
Show Code
                    
        <div class="alert alert-outline-primary" role="alert">
        A simple primary alert—check it out!
        </div>
        <div class="alert alert-outline-secondary" role="alert">
        A simple secondary alert—check it out!
        </div>
        <div class="alert alert-outline-success" role="alert">
        A simple success alert—check it out!
        </div>
        <div class="alert alert-outline-danger" role="alert">
        A simple danger alert—check it out!
        </div>
        <div class="alert alert-outline-warning" role="alert">
        A simple warning alert—check it out!
        </div>
        <div class="alert alert-outline-info" role="alert">
        A simple info alert—check it out!
        </div>
        <div class="alert alert-outline-light" role="alert">
        A simple light alert—check it out!
        </div>
        <div class="alert alert-outline-dark" role="alert">
        A simple dark alert—check it out!
        </div>
                    
                  
Icon Alerts
Show Code
                    
        <div class="alert alert-success d-flex align-items-center" role="alert">
        <i class="fa fa-check mr-2" aria-hidden="true"></i> A simple success alert—check it out!
        </div>
        <div class="alert alert-success d-flex align-items-center" role="alert">
        <i class="fa fa-exclamation-triangle mr-2" aria-hidden="true"></i> A simple warning alert—check it out!
        </div>
        <div class="alert alert-danger d-flex align-items-center" role="alert">
        <i class="fa fa-ban mr-2" aria-hidden="true"></i> A simple danger alert—check it out!
        </div>
                    
                  
Dismissing Alerts
Show Code
                    
        <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>
                    
                  
Additional Content Alerts
Show Code
                    
        <div class="alert alert-info" 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>