Alerts

Provide contextual feedback messages for typical user actions or display a notification that requires action from the user to proceed.

Wrap the message in a .alert and use the modifier classes .alert-success, .alert-warning, .alert-danger, .alert-info and .alert-system to change colors and icons.

Width is determined by the parent container, although it's maximum width is 600px. The text wraps to as many lines as necessary without truncation.


    <div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message. </div>
    <div class="alert alert-info" role="alert"><strong>Heads up!</strong> It's good that you read this, but it's not super important. </div>
    <div class="alert alert-warning" role="alert"><strong>Warning!</strong> Better check yourself, you're not looking too good. </div>
    <div class="alert alert-system" role="alert"><strong>Maintenance mode</strong> System on scheduled maintenance. </div>
    <div class="alert alert-danger" role="alert"><strong>Oh snap!</strong> Something went wrong.</div>