Alerts

Examples

Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.

<div class="alert alert-success" role="alert">...</div>

No default class

Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.

Dismissible alerts

Build on any alert by adding an optional .alert-dismissible and close button.

Ensure proper behavior across all devices

Be sure to use the <button> element with the data-dismiss="alert" data attribute.

Links in alerts

Use the .alert-link utility class to quickly provide matching colored links within any alert.