Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

        
            <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">
                <i class="fas fa-thumbs-up mr-1"></i>
                A simple success alert—check it out!
            </div>
            <div class="alert alert-danger" role="alert">
                <i class="fas fa-exclamation-circle mr-1"></i>
                A simple danger alert—check it out!
            </div>
            <div class="alert alert-warning" role="alert">
                <i class="fas fa-exclamation-triangle mr-1"></i>
                A simple warning alert—check it out!
            </div>
            <div class="alert alert-info" role="alert">
                <i class="fas fa-info-circle mr-1"></i>
                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>
        
    

Bootstrap Documentation