Flash Message

Flash messages are notices that are placed at the top of the page, just below the header. They span the whole width of the page (except when the in-page navigation is used) and are useful, for instance, for displaying the result of a form submission (when Ajax is not available).

The code of the flash message must be placed inside <div role="main"> and come anywhere after the <header> element. If the message meets these conditions but is located further down the page, it is moved to the right location automatically.

Success

Use the class flash--success to show a successful message.

Lorem ipsum! Lorem ipsum, dolor sit amet consectetur adipisicing elit . Ullam, esse! Deleniti, animi cumque atque vitae eaque distinctio, saepe totam eius voluptatibus nobis, optio expedita corrupti quod iure facilis impedit adipisci?

Info

Use the class flash--info to show a informational message.

Warning

Use the class flash--warning to show a warning message.

Danger

Use the class flash--danger to show a danger message.

Center aligned

On some layouts, the alignment of the flash message's content on wide screen is not optimal. In this case, use the class flash--center to centre the content.

Left aligned

Use flash--keep-left to align the content to the left of the page.