Elements


These modular elements can be readily used and customized across pages and in different blocks.


	<div class="alert alert-success" role="alert">
		<strong>Well done!</strong> You successfully read this important alert message.
	</div>
	<div class="alert alert-info" role="alert">
	  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
	</div>
	<div class="alert alert-warning" role="alert">
	  <strong>Warning!</strong> Better check yourself, you're not looking too good.
	</div>
	<div class="alert alert-danger" role="alert">
	  <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
	</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

	<div class="iconic-alert">
		<div class="alert alert-success alert-dismissible fade show" role="alert">
		  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
			<span aria-hidden="true">×</span>
		  </button>
		  <strong><i class="fa fa-check"></i> Well done! </strong> You succesfully read this message
		</div>
		<div class="alert alert-info alert-dismissible fade show" role="alert">
		  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
			<span aria-hidden="true">×</span>
		  </button>
		  <strong><i class="fa fa-info"></i> Warning!</strong> You should check in on some of those fields below.
		</div>
		<div class="alert alert-warning alert-dismissible fade show" role="alert">
		  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
			<span aria-hidden="true">×</span>
		  </button>
		  <strong><i class="fa fa-warning"></i> Warning!</strong> You should check in on some of those fields below.
		</div>
		<div class="alert alert-danger alert-dismissible fade show" role="alert">
		  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
			<span aria-hidden="true">×</span>
		  </button>
		  <strong><i class="fa fa-exclamation"></i> Warning!</strong> You should check in on some of those fields below.
		</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