Alerts
- UI Components
- Alerts
Examples
Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the four required contextual classes (e.g., .alert-success). For inline dismissal, use the alerts jQuery plugin.
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple dark alert—check it out!
Link color
Use the .alert-link utility class to quickly provide matching colored links within any alert.
A simple primary alert with an example link. Give it a click if you like.
A simple secondary alert with an example link. Give it a click if you like.
A simple success alert with an example link. Give it a click if you like.
A simple danger alert with an example link. Give it a click if you like.
A simple warning alert with an example link. Give it a click if you like.
A simple info alert with an example link. Give it a click if you like.
A simple dark alert with an example link. Give it a click if you like.
Dismissing
You can see this in action with a live demo:
Well done! You successfully read this important alert message.
Well done! You successfully read this important alert message.
Well done! You successfully read this important alert message.
Well done! You successfully read this important alert message.
Well done! You successfully read this important alert message.
Well done! You successfully read this important alert message.
Well done! You successfully read this important alert message.
Solid Background
You can see this in action with a live demo:
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple dark alert—check it out!
Icon Dismissable
You can see this in action with a live demo:
Well done! You successfully read this important alert message.
Heads up! You successfully read this important alert message.
Warning! You successfully read this important alert message.
Oh snap! You successfully read this important alert message.
Good Work! You successfully read this important alert message.
Wow! You successfully read this important alert message.
Great! You successfully read this important alert message.
Icon Background
You can see this in action with a live demo:
Well done! You successfully read this important alert message.
Warning! You successfully read this important alert message.
Oh snap! You successfully read this important alert message.
Wow! You successfully read this important alert message.
Icon Arrow Background
You can see this in action with a live demo:
Well done! You successfully read this important alert message.
Warning! You successfully read this important alert message.
Oh snap! You successfully read this important alert message.
Wow! You successfully read this important alert message.
