Bootstrap: Alerts

Basic Example

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

<Alert success>
  <strong>Well done!</strong> You successfully read this important alert message.
</Alert>
<Alert info>
  <strong>Heads up!</strong>{" This alert needs your attention, but it's not super important."}
</Alert>
<Alert warning>
  <strong>Warning!</strong>{" Better check yourself, you're not looking too good."}
</Alert>
<Alert danger collapseBottom>
  <strong>Oh snap!</strong>Change a few things up and try submitting again.
</Alert>

Dismissible alerts

Build on any alert by adding an optional dismissible property.

<Alert warning dismissible collapseBottom>
  <strong>Warning!</strong>{" Better check yourself, you're not looking too good."}
</Alert>

Links in Alerts

Use the AlertLink component to quickly provide matching colored links within any alert.

<Alert success>
  <strong>Well done!</strong> You successfully read <AlertLink href='#'>this important alert message</AlertLink>.
</Alert>
<Alert info>
  <strong>Heads up!</strong> This <AlertLink href='#'>alert needs your attention</AlertLink>{", but it's not super important."}</Alert>
<Alert warning>
  <strong>Warning!</strong>{" Better check yourself, you're "}<AlertLink href='#'>not looking too good.</AlertLink>
</Alert>
<Alert danger collapseBottom>
  <strong>Oh snap!</strong> <AlertLink href='#'>Change a few things up</AlertLink> and try submitting again.
</Alert>