Alerts

An alert is a short and attention-grabbing message providing feedback about some important aspect of the service which may need to be handled by the user. Read more about alerts in the UX Guidelines.

Wrap any text and an optional dismiss button in .alert for basic alert messages.

Use when:

You need the user to pay attention to something unexpected
User should likely change his course of action because of the alert
The message may stay on screen until handled

Design

Options

There are 4 options for alerts and to apply them to you alert message simply add one of the following classes: .alert-success, .alert-info, .alert-warning or .alert-danger.

Example
HTML

Success .alert-success

Well done! You successfully read this important alert message.

Info .alert-info

Heads up! This alert needs your attention, but it's not super important.

Warning .alert-warning

Warning! Better check yourself, you're not looking too good.

Danger .alert-danger

Oh snap! Change a few things up and try submitting again.

<p class="mb-8"><b>Success</b> <code>.alert-success</code></p>
<div class="alert col-xxl-6 col-md-8 alert-success" role="alert">
	<strong>Well done!</strong> You successfully read this important <a href="#">alert message</a>.
</div>

<p class="mb-8 mt-32"><b>Info</b> <code>.alert-info</code></p>
<div class="alert col-xxl-6 col-md-8 alert-info" role="alert">
	<strong>Heads up!</strong> This alert needs your attention, but <a href="#">it's not super</a> important.
</div>

<p class="mb-8 mt-32"><b>Warning</b> <code>.alert-warning</code></p>
<div class="alert col-xxl-6 col-md-8 alert-warning" role="alert">
	<strong>Warning!</strong> Better check <a href="#">yourself</a>, you're not looking too good.
</div>

<p class="mb-8 mt-32"><b>Danger</b> <code>.alert-danger</code></p>
<div class="alert col-xxl-6 col-md-8 alert-danger" role="alert">
	<strong>Oh snap!</strong> Change a <a href="#">few things up</a> and try submitting again.
</div>

Sizing

Fancy small alerts? Add .alert-sm for the small version.

Example
HTML

Success .alert-success.alert-sm

Well done! You successfully read this important alert message.

Info .alert-info.alert-sm

Heads up! This alert needs your attention, but it's not super important.

Warning .alert-warning.alert-sm

Warning! Better check yourself, you're not looking too good.

Danger .alert-danger.alert-sm

Oh snap! Change a few things up and try submitting again.

<p class="mb-8"><b>Success</b> <code>.alert-success.alert-sm</code></p>
<div role="alert" class="alert alert-success alert-sm col-xxl-6 col-md-8">
	<strong>Well done!</strong> You successfully read this important alert message.
</div>

<p class="mb-8 mt-32"><b>Info</b> <code>.alert-info.alert-sm</code></p>
<div role="alert" class="alert alert-info alert-sm col-xxl-6 col-md-8">
	<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>

<p class="mb-8 mt-32"><b>Warning</b> <code>.alert-warning.alert-sm</code></p>
<div class="alert alert-warning alert-sm col-xxl-6 col-md-8" role="alert">
	<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

<p class="mb-8 mt-32"><b>Danger</b> <code>.alert-danger.alert-sm</code></p>
<div role="alert" class="alert alert-danger alert-sm col-xxl-6 col-md-8">
	<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>

Medium icons

For a medium icon size add .alert-icon-md to the alert main wrapper.

Example
HTML

Success .alert-success.alert-icon-md

Well done! You successfully read this important alert message. Alerts are available for any length of text, as well as an optional dismiss button.

Use visual hierachy to arrange the text elements to show their order of importance.

Info .alert-info.alert-icon-md

Heads up! This alert needs your attention, but it's not super important. Alerts are available for any length of text, as well as an optional dismiss button.

Use visual hierachy to arrange the text elements to show their order of importance.

Warning .alert-warning.alert-icon-md

Warning! Better check yourself, you're not looking too good. Alerts are available for any length of text, as well as an optional dismiss button.

Use visual hierachy to arrange the text elements to show their order of importance.

Danger .alert-danger.alert-icon-md

Oh snap! Change a few things up and try submitting again. Alerts are available for any length of text, as well as an optional dismiss button.

Use visual hierachy to arrange the text elements to show their order of importance.

<p class="mb-8"><b>Success</b> <code>.alert-success.alert-icon-md</code></p>
<div role="alert" class="alert alert-icon-md alert-success col-xxl-6 col-md-8">
	<p>
		<strong>Well done!</strong>
		You successfully read this important alert message. Alerts are available for any length of text, as well as an optional dismiss button.
	</p>
	<p>Use visual hierachy to arrange the text elements to show their order of importance.</p>
</div>

<p class="mb-8 mt-32"><b>Info</b> <code>.alert-info.alert-icon-md</code></p>
<div role="alert" class="alert alert-icon-md alert-info col-xxl-6 col-md-8">
	<p>
		<strong>Heads up!</strong>
		This alert needs your attention, but it's not super important. Alerts are available for any length of text, as well as an optional dismiss button.
	</p>
	<p>Use visual hierachy to arrange the text elements to show their order of importance.</p>
</div>

<p class="mb-8 mt-32"><b>Warning</b> <code>.alert-warning.alert-icon-md</code></p>
<div role="alert" class="alert alert-icon-md alert-warning col-xxl-6 col-md-8">
	<p>
		<strong>Warning!</strong>
		Better check yourself, you're not looking too good. Alerts are available for any length of text, as well as an optional dismiss button.
	</p>
	<p>Use visual hierachy to arrange the text elements to show their order of importance.</p>
</div>

<p class="mb-8 mt-32"><b>Danger</b> <code>.alert-danger.alert-icon-md</code></p>
<div role="alert" class="alert alert-icon-md alert-danger col-xxl-6 col-md-8">
	<p>
		<strong>Oh snap!</strong>
		Change a few things up and try submitting again. Alerts are available for any length of text, as well as an optional dismiss button.
	</p>
	<p>Use visual hierachy to arrange the text elements to show their order of importance.</p>
</div>

Large icons

For a large icon size add .alert-icon-lg to the alert main wrapper.

Example
HTML

Success .alert-success.alert-icon-lg

Well done! You successfully read this important alert message. Alerts are available for any length of text, as well as an optional dismiss button.

Use visual hierachy to arrange the text elements to show their order of importance.

Info .alert-info.alert-icon-lg

Heads up! This alert needs your attention, but it's not super important. Alerts are available for any length of text, as well as an optional dismiss button.

Use visual hierachy to arrange the text elements to show their order of importance.

Warning .alert-warning.alert-icon-lg

Warning! Better check yourself, you're not looking too good. Alerts are available for any length of text, as well as an optional dismiss button.

Use visual hierachy to arrange the text elements to show their order of importance.

Danger .alert-danger.alert-icon-lg

Oh snap! Change a few things up and try submitting again. Alerts are available for any length of text, as well as an optional dismiss button.

Use visual hierachy to arrange the text elements to show their order of importance.

<p class="mb-8"><b>Success</b> <code>.alert-success.alert-icon-lg</code></p>
<div role="alert" class="alert alert-icon-lg alert-success col-xxl-6 col-md-8">
	<p>
		<strong>Well done!</strong>
		You successfully read this important alert message. Alerts are available for any length of text, as well as an optional dismiss button.
	</p>
	<p>Use visual hierachy to arrange the text elements to show their order of importance.</p>
</div>

<p class="mb-8 mt-32"><b>Info</b> <code>.alert-info.alert-icon-lg</code></p>
<div role="alert" class="alert alert-icon-lg alert-info col-xxl-6 col-md-8">
	<p>
		<strong>Heads up!</strong>
		This alert needs your attention, but it's not super important. Alerts are available for any length of text, as well as an optional dismiss button.
	</p>
	<p>Use visual hierachy to arrange the text elements to show their order of importance.</p>
</div>

<p class="mb-8 mt-32"><b>Warning</b> <code>.alert-warning.alert-icon-lg</code></p>
<div role="alert" class="alert alert-icon-lg alert-warning col-xxl-6 col-md-8">
	<p>
		<strong>Warning!</strong>
		Better check yourself, you're not looking too good. Alerts are available for any length of text, as well as an optional dismiss button.
	</p>
	<p>Use visual hierachy to arrange the text elements to show their order of importance.</p>
</div>

<p class="mb-8 mt-32"><b>Danger</b> <code>.alert-danger.alert-icon-lg</code></p>
<div role="alert" class="alert alert-icon-lg alert-danger col-xxl-6 col-md-8">
	<p>
		<strong>Oh snap!</strong>
		Change a few things up and try submitting again. Alerts are available for any length of text, as well as an optional dismiss button.
	</p>
	<p>Use visual hierachy to arrange the text elements to show their order of importance.</p>
</div>

Dismissible alerts

Build on any alert by adding an optional .alert-dismissible and close button.

Example
HTML

Warning! Are you sure you want to do this?

You are trying to do something useful, for this you require a proper computer, a mouse with more than one button. Ask an adult to help you out with this.

Warning! Better check yourself, you're not looking too good.

<div class="alert alert-warning alert-dismissible col-xxl-6 col-md-8" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">Close</button>
	<h2>Warning! Are you sure you want to do this?</h2>
	<p>You are trying to do something useful, for this you require a proper computer, a mouse with more than one button. Ask an adult to help you out with this. </p>
	<p>
		<button type="button" class="btn btn-primary">Take this action</button>
		<button type="button" class="btn">Or do this</button>
	</p>
</div>

<div class="alert alert-warning alert-sm alert-dismissible col-xxl-6 col-md-8" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
	<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>