<div class="alert alert-primary" role="alert">
	A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
	A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
	A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
	A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
	A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
	A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
	A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
	A simple dark alert—check it out!
</div>

<div class="alert alert-primary" role="alert">
	A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
	A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
	A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
	A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
	A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
	A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
	A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
	A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

<div class="alert alert-success" role="alert">
	<h5 class="alert-heading">Well done!</h5>
	<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
	<hr>
	<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

<div class="alert alert-warning alert-dismissible fade show" role="alert">
	<strong>Holy guacamole!</strong> You should check in on some of those fields below.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert alert-success alert-dismissible fade show mt-2 mb-0 rounded-3" role="alert">
	<!-- Avatar -->
	<div class="avatar avatar-xs ms-2">
		<img class="avatar-img rounded-circle" src="assets/images/avatar/09.jpg" alt="avatar">
	</div>
	<!-- Info -->
	The personality development class starts at 2:00 pm, click on <a href="#" class="text-reset btn-link mb-0 fw-bold">Join Now</a>
	<button type="button" class="btn-close mt-1" data-bs-dismiss="alert" aria-label="Close"></button>
</div>