Wrap any text and an optional dismiss button in .alertand one of the four contextual classes (e.g., .alert-success) for basic alert messages. for links use .alert-link
Well done!You successfully read this important alert message.alert link
Heads up!This alert needs your attention, but it's not super important.alert link
Warning!Better check yourself, you're not looking too good.alert link
Oh snap!Change a few things up and try submitting again.alert link
Dismissible Alerts
Build on any alert by adding an optional .alert-dismissibleand close button. Be sure to use the <button>element with the data-dismiss="alert"data attribute.
Well done!You successfully read this important alert message.
Heads up!This alert needs your attention, but it's not super important.
Warning!Better check yourself, you're not looking too good.
Oh snap!Change a few things up and try submitting again.
Custom Alerts
Use .alert-customclass along with the .alertclass to get custom alert, you can also use contextual classes (e.g., .alert-info) and .alert-linkfor customized links you should wrap the alert title in a block element (e.g., <h4>) with class .alert-title
custom alert success
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam
custom alert danger
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque
custom alert info
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam
custom alert warning
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque
