<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>

	<h3>Link Color</h3>
	<div class="alert alert-warning" role="alert">
	  This is a 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">
	  This is a 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">
	  This is a light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
	</div>

	<h3>Additional Content</h3>
	<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-success , .alert-info , .alert-warning , .alert-danger with the .alert class for pre-styled alert
  • To add link within alert message use .alert-link

Link Color

Additional Content


	

						
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