--- title: Alerts summary: Alert messages are used to inform users of the status of their action and help them solve any problems that might have occurred. Good design of alert modals is very important for the overall user experience of a website or app. bootstrapLink: components/alerts/ description: Alert messages for user notifications. --- ## Default markup Depending on the information you need to convey, you can use one of the following types of alert messages - **success**, **info**, **warning** or **danger**. Using the right type of alert modal will help draw users' attention to the message and prompt them to take action. ```html example vertical columns={2} centered separated ``` ```html ``` ## Alert links Add a link to your alert message to redirect users to the details they need to complete or additional information they should read. ```html example vertical columns={2} centered
This is a danger alert — check it out!
``` ## Dismissible alerts Add the `x` close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only once the user closes it. ```html example vertical columns={2} centered separated ``` ```html ``` ## Alerts with icons Add an icon to your alert modal to make it more user-friendly and help users easily identify the message. ```html ``` To see how the icon affects the alert modal, look at the example below. ```html example vertical columns={2} centered separated ``` ## Alert with avatar Add an avatar to your alert modal to make it more personalized. ```html example vertical columns={2} centered separated ``` ## Alert with buttons Add primary and secondary buttons to your alert modals if you want users to take a particular action based on the information included in the modal message. ```html example vertical columns={2} centered separated ``` ## Important alerts If you want your alert to be really eye-catching, you can add a class `alert-important`. ```html ``` Look at the example below to see how the important alert affects the alert modal. ```html example vertical columns={2} centered separated ```