<div class="alert alert-primary" role="alert">
        <strong>Hi!</strong> This is primary alert for a demo
    </div>
                                        
                                    

                                        
    <div class="alert alert-invert-primary" role="alert">
        <strong>Hi!</strong> This is primary invert alert for a demo
    </div>
                                        
                                    

                                        
    <div class="alert alert-brand" role="alert">
        <strong>Hi!</strong> This is brand alert for a demo <a href="#" class="alert-link">Alert link here</a>
    </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-outline-primary" role="alert">
        <strong>Hi!</strong> This is primary outline alert for a demo
    </div>
                                        
                                    

                                        
        <div class="alert alert-icon alert-danger" role="alert">
            <span class="icon-size m--font-lg"><i class="fa fa-skull"></i></span>
            <div class="alert-content pl-2"><strong>Hi!</strong> This is danger alert for a demo</div>
        </div>