Default
Alerts are available for any length of text, as well as an optional dismiss button. Add .alert.alert-{color}classes for alert with all theme colors.
Title
Add a title to the alert with the .alert-heading
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, laborum!.
Colors
Alerts are available for any length of text, as well as an optional dismiss button. Add .alert.alert-{color}classes for alert with all theme colors.
Primary
Tootsie roll lollipop lollipop icing. Wafer cookie danish macaroon. Liquorice fruitcake apple pie I love cupcake cupcake.
Success
Tootsie roll lollipop lollipop icing. Wafer cookie danish macaroon. Liquorice fruitcake apple pie I love cupcake cupcake.
Danger
Tootsie roll lollipop lollipop icing. Wafer cookie danish macaroon. Liquorice fruitcake apple pie I love cupcake cupcake.
Warning
Tootsie roll lollipop lollipop icing. Wafer cookie danish macaroon. Liquorice fruitcake apple pie I love cupcake cupcake.
Dark
Tootsie roll lollipop lollipop icing. Wafer cookie danish macaroon. Liquorice fruitcake apple pie I love cupcake cupcake.
Info
Tootsie roll lollipop lollipop icing. Wafer cookie danish macaroon. Liquorice fruitcake apple pie I love cupcake cupcake.
Light
Tootsie roll lollipop lollipop icing. Wafer cookie danish macaroon. Liquorice fruitcake apple pie I love cupcake cupcake.
Closable Alerts
Add a dismiss button and the .alert-dismissibleclass, which adds extra padding to the right of the alert and positions the .close button.
Chupa chups topping bonbon. Jelly-o toffee I love. Sweet I love wafer I love wafer.
You can also change the icon used for the close buton on the alerts
Chupa chups topping bonbon. Jelly-o toffee I love. Sweet I love wafer I love wafer.
Icon
Alert With Icon
Example
An example would be to have an input and when a condition is met, show the alert. use class .alert-validationfor your input and class .alert-validation-msgwith your alert.