Alerts

Alerts are used to communicate a state that affects a system, feature or page. They are used to provide feedback about an action that has taken place.

Primary Alert

<div class="alert alert-primary w-100 mb-0" role="alert">
	Notification text
</div>

Secondary Alert

<div class="alert alert-secondary w-100 mb-0" role="alert">
	Notification text
</div>

Danger Alert

<div class="alert alert-danger w-100 mb-0" role="alert">
	Notification text
</div>

Dark Alert

<div class="alert alert-dark w-100 mb-0" role="alert">
	Notification text
</div>

Info Alert

<div class="alert alert-info w-100 mb-0" role="alert">
	Notification text
</div>

Light Alert

<div class="alert alert-light w-100 mb-0" role="alert">
	Notification text
</div>

Success Alert

<div class="alert alert-success w-100 mb-0" role="alert">
	Notification text
</div>

Warning Alert

<div class="alert alert-warning w-100 mb-0" role="alert">
	Notification text
</div>

Horizontal Alert

<div class="alert alert-horizontal alert-dismissible w-100" role="alert">
	<h4 class="alert-heading">Lorem Ipsum Dolor</h4>
	<p>Notification text</p>
	<p>
		<a href="#">Learn more</a>
	</p>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Vertical Alert

<div class="alert alert-vertical alert-dismissible" role="alert">
	<h4 class="alert-heading">Lorem Ipsum Dolor</h4>
	<p>Notification text</p>
	<p>
		<a href="#">Learn more</a>
	</p>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Accessibility

Make it clear what this alert does for the user.

What to do with alerts

DON'T

What not to do with alerts

Classes

Complete list of all CSS classes for the component.

Name	Class
Primary Alert	`alert alert-primary`
Secondary Alert	`alert alert-secondary`
Danger Alert	`alert alert-danger`
Dark Alert	`alert alert-dark`
Info Alert	`alert alert-info`
Light Alert	`alert alert-light`
Success Alert	`alert alert-success`
Warning Alert	`alert alert-warning`
Horizontal Alert	`alert alert-horizontal`
Vertical Alert	`alert alert-vertical`