Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Read Bootstrap documentation

.alert.alert-primary-light.d-flex.flex-column.flex-lg-row.flex-xl-row.text-primary(role="alert")
	.mr-auto.text-dark
		|  Develop beautiful landing pages, using top-notch layouts
	a.btn-link.hvr-icon-forward(href="#")
		| Request a demo
		small
			i.fas.fa-chevron-right.ml-2.hvr-icon
.alert.alert-gray.d-flex.flex-column.flex-lg-row.flex-xl-row.text-primary(role="alert")
	.my-auto.mr-auto.text-dark
		|  Develop beautiful landing pages, using top-notch layouts
	a.btn.btn-primary.btn-sm.rounded-pill.px-3(href='#')
		i.far.fa-clone.mr-2
		| Register

.alert.alert-secondary.alert-dismissible.fade.show(role="alert")
	strong Holy guacamole!
	|  You should check in on some of those fields below.
	a.close(data-dismiss="alert" aria-label="Close")
		i.fas.fa-times
<div class="alert alert-primary-light d-flex flex-column flex-lg-row flex-xl-row text-primary" role="alert">
	<div class="mr-auto text-dark"> Develop beautiful landing pages, using top-notch layouts</div>
	<a class="btn-link hvr-icon-forward" href="#">Request a demo
		<small><i class="fas fa-chevron-right ml-2 hvr-icon"></i></small>
	</a>
</div>
<div class="alert alert-gray d-flex flex-column flex-lg-row flex-xl-row text-primary" role="alert">
	<div class="my-auto mr-auto text-dark"> Develop beautiful landing pages, using top-notch layouts</div>
	<a class="btn btn-primary btn-sm rounded-pill px-3" href="#">
		<i class="far fa-clone mr-2"></i>Register
	</a>
</div>
<div class="alert alert-secondary alert-dismissible fade show" role="alert">
	<strong>Holy guacamole!</strong> 
	You should check in on some of those fields below.
	<a class="close" data-dismiss="alert" aria-label="Close">
		<i class="fas fa-times"></i>
	</a>
</div>

Visit Bootstrap documentation to learn more about this component

Version 2.0.0, [email protected]

To spread the power of good design