<div class="alert alert-primary" role="alert">
	  This is a primary alert—check it out!
	</div>
	<div class="alert alert-secondary" role="alert">
	  This is a secondary alert—check it out!
	</div>
	<div class="alert alert-success" role="alert">
	  This is a success alert—check it out!
	</div>

	<!--Link Color< -->
	<div class="alert alert-warning" role="alert">
	  This is a warning alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
	</div>
	<div class="alert alert-info" role="alert">
	  This is a info alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
	</div>
	<div class="alert alert-light" role="alert">
	  This is a light alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
	</div>

	<!--Additional Content< -->
	<div class="alert alert-success" role="alert">
	  <h4 class="alert-heading ">Well done!</h4>
	  <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>

						

How to use

Alert is useful to provide feedback for perticuler user actions. Here’s the example of how to use it:

• Be sure you’ve loaded the compiled Bootstrap JavaScript.
• Use the .alert class to alert message wrapper
• Use the contextual class .alert-primary, .alert-secondary, .alert-success , .alert-info , .alert-warning , .alert-danger, .alert-light, .alert-dark with the .alert class for pre-styled alert
• To add link within alert message use .alert-link

	<div class="iconic-alert">
		<div class="alert alert-primary d-flex align-items-center alert-dismissible fade show" role="alert">
			<div>
			  <i class="fas fa-info"></i>
			</div>

			<div>
			  <strong>Primary!</strong> You should check in on some of those fields below.
			</div>

			<button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
		    <span aria-hidden="true">×</span>
		  </button>
		</div>
	</div>

	<!-- SVG Icon -->
	<div class="iconic-alert">
		<div class="alert alert-primary d-flex align-items-center alert-dismissible fade show" role="alert">
			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="primary:">
			  <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
			</svg>

			<div>
			  <strong>Primary!</strong> You should check in on some of those fields below.
			</div>

			<button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
		    <span aria-hidden="true">×</span>
		  </button>
		</div>
	</div>


						

How to use

• For the icon in the alert box use an class .iconic-alert in the parent wrapper
• Use any icon (here FontAwesome icon used) into an <i> element
• Use any icon (here SVG icon used) into an <svg> element