Alerts

                    
                      <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 class="alert alert-soft-primary" role="alert">
                        This is a soft primary alert—check it out!
                      </div>
                      <div class="alert alert-soft-secondary" role="alert">
                        This is a soft secondary alert—check it out!
                      </div>
                      <div class="alert alert-soft-success" role="alert">
                        This is a soft success alert—check it out!
                      </div>
                      <div class="alert alert-soft-danger" role="alert">
                        This is a soft danger alert—check it out!
                      </div>
                      <div class="alert alert-soft-warning" role="alert">
                        This is a soft warning alert—check it out!
                      </div>
                      <div class="alert alert-soft-info" role="alert">
                        This is a soft info alert—check it out!
                      </div>
                      <div class="alert alert-soft-light" role="alert">
                        This is a soft light alert—check it out!
                      </div>
                      <div class="alert alert-soft-dark" role="alert">
                        This is a soft dark alert—check it out!
                      </div>
                    
                  

                    
                      <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-primary media" role="alert">
                        <i class="tio-warning mt-1 mr-1"></i>
                        <div class="media-body" 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>
                    
                  

                    
                      <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">
                          <i class="tio-clear tio-lg"></i>
                        </button>
                      </div>
                    
                  

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