Simple
Add color contextual class.
Dark
Add .dark class to change the style.
With Icon
Add .alert-icon class.
With Title
Add title.
Some Message
Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.
Some Message
Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.
With Button
Add buttons.
Some Message
Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.
Some Message
Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.
With Avatar
Add .alert-avatar class.
You have done 5 actions.
Some Message
Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.
Some Message
Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.
Dismissible and Click
Build on any alert by adding an optional .alert-dismissible and close button.
Some Message
Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.
Link In Alerts
Use the .alert-link utility class to quickly provide matching colored links within any alert.
Some Message
Lorem ipsum dolor sit amet, consectetur adipiscing elit. not looking too good
With List
An alert include title and item list with close button.
Alert With List
- Cras justo odio
- Dapibus ac facilisis in
Alert With List
- Cras justo odio
- Dapibus ac facilisis in
Alt Alerts
Swap modifier class .alert-alt to switch another four contextual feedback message style below.
Dark Alt
Swap modifier class .alert-alt and .dark to switch another four contextual feedback message style below.
Social Messages
Add .alert-social class.