Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. No default class, you're required to specify a type via contextual class. Choose from success, info, warning, or danger.
Ensure proper behavior across all devices
Be sure to use the <button> element with the data-dismiss="alert" data attribute.
Oh snap! You got an error!
Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Callouts
Context
Well done!
You successfully read this important message. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, dolorum fugit voluptatem odio aut tempore.
Heads up!
This message needs your attention, but it's not super important. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, libero facere suscipit sapiente ut provident!
Warning!
Best check yo self, you're not looking too good. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero non quos explicabo facilis beatae laborum.
Oh snap!
Change a few things up and try submitting again. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti ratione nisi quo consequuntur error quasi!
Right-aligned callout .callout-right
Well done!
You successfully read this important message. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem voluptatibus quis harum accusantium et quidem.
Heads up!
This message needs your attention, but it's not super important. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, natus tempora libero maiores aliquam incidunt.
Warning!
Best check yo self, you're not looking too good. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, commodi accusamus aliquam quas quis eos!
Oh snap!
Change a few things up and try submitting again. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, quo nulla dicta dolor pariatur atque.