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.
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.
Combine alert class with one of the following: alert-success, alert-info, alert-warning, alert-danger to get the alert that you need.
Alert classes affect the color of all the text inside an alert. Use another class, e.g. text-secondary to change the color of the alert's content.
<div class="alert alert-success" role="alert">
<div class="alert-icon">
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="icon alert-icon icon-2">
<path d="M5 12l5 5l10 -10" />
</svg>
</div>
<div>
<h4 class="alert-heading">Wow! Everything worked!</h4>
<div class="alert-description">
Your account has been saved!
</div>
</div>
</div>
<div class="alert alert-info" role="alert">
<div class="alert-icon">
<!-- Download SVG icon from http://tabler.io/icons/icon/info-circle -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="icon alert-icon icon-2">
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" />
<path d="M12 9h.01" />
<path d="M11 12h1v4h1" />
</svg>
</div>
<div>
<h4 class="alert-heading">Did you know?</h4>
<div class="alert-description">
Here is something that you might like to know.
</div>
</div>
</div>
<div class="alert alert-warning" role="alert">
<div class="alert-icon">
<!-- Download SVG icon from http://tabler.io/icons/icon/alert-triangle -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="icon alert-icon icon-2">
<path d="M12 9v4" />
<path
d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z" />
<path d="M12 16h.01" />
</svg>
</div>
<div>
<h4 class="alert-heading">Uh oh, something went wrong</h4>
<div class="alert-description">
Sorry! There was a problem with your request.
</div>
</div>
</div>
<div class="alert alert-danger" role="alert">
<div class="alert-icon">
<!-- Download SVG icon from http://tabler.io/icons/icon/alert-circle -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="icon alert-icon icon-2">
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" />
<path d="M12 8v4" />
<path d="M12 16h.01" />
</svg>
</div>
<div>
<h4 class="alert-heading">I'm so sorry…</h4>
<div class="alert-description">
Your account has been deleted and can't be restored.
</div>
</div>
</div>Add a link to your alert message to redirect users to the details they need to complete or additional information they should read. Use alert-link class to style the link and match the text color.
<div class="alert alert-danger" role="alert">
<div class="alert-icon">
<!-- Download SVG icon from http://tabler.io/icons/icon/alert-circle -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="icon alert-icon icon-2">
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" />
<path d="M12 8v4" />
<path d="M12 16h.01" />
</svg>
</div>
This is a danger alert
<a href="#" class="alert-link">check it out</a>
</div>Add the x close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only when the user closes it.
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a><div class="alert alert-danger alert-dismissible" role="alert">
<div class="alert-icon">
<!-- Download SVG icon from http://tabler.io/icons/icon/alert-circle -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="icon alert-icon icon-2">
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" />
<path d="M12 8v4" />
<path d="M12 16h.01" />
</svg>
</div>
This is a danger alert
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>Add an icon to your alert modal to make it more user-friendly and help users easily identify the message.
Use the alert-icon class on an <svg> (or on an <i> when using the webfont) to provide the proper styling.
<div class="alert alert-success" role="alert">
<div class="d-flex">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24"
height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 12l5 5l10 -10" />
</svg>
</div>
<div>
<h4 class="alert-title">Wow! Everything worked!</h4>
<div class="text-secondary">Your account has been saved!</div>
</div>
</div>
</div>
<div class="alert alert-info" role="alert">
<div class="d-flex">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24"
height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="12" cy="12" r="9" />
<line x1="12" y1="8" x2="12.01" y2="8" />
<polyline points="11 12 12 12 12 16 13 16" />
</svg>
</div>
<div>
<h4 class="alert-title">Did you know?</h4>
<div class="text-secondary">Here is something that you might like to know.
</div>
</div>
</div>
</div>
<div class="alert alert-warning" role="alert">
<div class="d-flex">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24"
height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M12 9v2m0 4v.01" />
<path
d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" />
</svg>
</div>
<div>
<h4 class="alert-title">Uh oh, something went wrong</h4>
<div class="text-secondary">Sorry! There was a problem with your request.
</div>
</div>
</div>
</div>
<div class="alert alert-danger" role="alert">
<div class="d-flex">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24"
height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="12" cy="12" r="9" />
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
</div>
<div>
<h4 class="alert-title">I'm so sorry…</h4>
<div class="text-secondary">Your account has been deleted and can't be
restored.</div>
</div>
</div>
</div>Add an avatar to your alert modal to make it more personalized.
<div class="alert alert-success" role="alert">
<div class="d-flex">
<div>
<span class="avatar me-3"
style="background-image: url(/static/avatars/039m.jpg)"></span>
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum
dolor sit amet,
consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur
adipisicing elit.
</div>
</div>
</div>
<div class="alert alert-info" role="alert">
<div class="d-flex">
<div>
<span class="avatar me-3">JL</span>
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum
dolor sit amet,
consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur
adipisicing elit.
</div>
</div>
</div>
<div class="alert alert-warning" role="alert">
<div class="d-flex">
<div>
<span class="avatar me-3"
style="background-image: url(/static/avatars/035f.jpg)"></span>
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum
dolor sit amet,
consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur
adipisicing elit.
</div>
</div>
</div>
<div class="alert alert-danger" role="alert">
<div class="d-flex">
<div>
<span class="avatar me-3"
style="background-image: url(/static/avatars/056f.jpg)"></span>
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum
dolor sit amet,
consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur
adipisicing elit.
</div>
</div>
</div>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.
Buttons don't inherit the alert's color, so you should set the proper class if you want it to be matched. For example, btn-success for alert-success.
Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.
Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.
<div class="alert alert-success alert-dismissible" role="alert">
<h3 class="mb-1">Some Title</h3>
<p class="text-secondary">
Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore
minim voluptate.
</p>
<div class="btn-list">
<a href="#" class="btn btn-success">Okay</a>
<a href="#" class="btn">Cancel</a>
</div>
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>
<div class="alert alert-info alert-dismissible" role="alert">
<h3 class="mb-1">Some Title</h3>
<p class="text-secondary">
Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore
minim voluptate.
</p>
<div class="btn-list">
<a href="#" class="btn btn-info">Okay</a>
<a href="#" class="btn">Cancel</a>
</div>
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>
<div class="alert alert-warning alert-dismissible" role="alert">
<h3 class="mb-1">Some Title</h3>
<p class="text-secondary">
Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore
minim voluptate.
</p>
<div class="btn-list">
<a href="#" class="btn btn-warning">Okay</a>
<a href="#" class="btn">Cancel</a>
</div>
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>
<div class="alert alert-danger alert-dismissible" role="alert">
<h3 class="mb-1">Some Title</h3>
<p class="text-secondary">
Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore
minim voluptate.
</p>
<div class="btn-list">
<a href="#" class="btn btn-danger">Okay</a>
<a href="#" class="btn">Cancel</a>
</div>
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>If you want your alert to be really eye-catching, you can add an alert-important class. It will use the selected color as a background for the alert.
<div class="alert alert-important alert-success alert-dismissible" role="alert">
...</div>You can also use other elements, like icons and dismissible buttons, with this type of alert.
<div class="alert alert-important alert-success alert-dismissible" role="alert">
<div class="d-flex">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24"
height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M5 12l5 5l10 -10"></path>
</svg>
</div>
<div>Wow! Everything worked!</div>
</div>
<a class="btn-close btn-close-white" data-bs-dismiss="alert"
aria-label="close"></a>
</div>
<div class="alert alert-important alert-danger alert-dismissible" role="alert">
<div class="d-flex">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24"
height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="12" cy="12" r="9" />
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
</div>
<div>Your account has been deleted and can't be restored.</div>
</div>
<a class="btn-close btn-close-white" data-bs-dismiss="alert"
aria-label="close"></a>
</div>You're not limited to the 4 default alert colors. You can use any base or social color you want.
<div class="alert alert-lime" role="alert">
<h4 class="alert-title">Wow! Everything worked!</h4>
<div class="text-secondary">Your account has been saved!</div>
</div>
<div class="alert alert-cyan" role="alert">
<h4 class="alert-title">Did you know?</h4>
<div class="text-secondary">Here is something that you might like to know.
</div>
</div>
<div class="alert alert-facebook" role="alert">
<h4 class="alert-title">You have a new friend on Facebook</h4>
<div class="text-secondary">Say hello to your new friend!</div>
</div>
<div class="alert alert-instagram alert-dismissible alert-important"
role="alert">
<div class="d-flex">
<div>
<span class="avatar me-3"
style="background-image: url(/static/avatars/035f.jpg)"></span>
</div>
<div>
<h4 class="alert-title">Sophia just added a new post on Instagram</h4>
<div>Be the first to see it!</div>
</div>
</div>
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>You can customize the alert colors by changing the SASS variables. The default values are:
--#{$prefix}alert-color: var(--#{$prefix}body-color);
--#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-color), .1)};
--#{$prefix}alert-padding-x: #{$alert-padding-x};
--#{$prefix}alert-padding-y: #{$alert-padding-y};
--#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
--#{$prefix}alert-border-color: #{color-transparent(var(--#{$prefix}alert-color), .2)};
--#{$prefix}alert-border: var(--#{$prefix}border-width) solid var(--#{$prefix}alert-border-color);
--#{$prefix}alert-border-radius: var(--#{$prefix}border-radius);
--#{$prefix}alert-link-color: inherit;
--#{$prefix}alert-heading-font-weight: var(--#{$prefix}font-weight-medium);