Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Use one of the four required contextual classes
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>Having a variation with bordered alert without background color.
<div class="alert alert-bordered alert-success" role="alert">...</div>
<div class="alert alert-bordered alert-info" role="alert">...</div>
<div class="alert alert-bordered alert-warning" role="alert">...</div>
<div class="alert alert-bordered alert-danger" role="alert">...</div>Having a variation of using solid background color alert.
<div class="alert alert-solid alert-success" role="alert">...</div>
<div class="alert alert-solid alert-info" role="alert">...</div>
<div class="alert alert-solid alert-warning" role="alert">...</div>
<div class="alert alert-solid alert-danger" role="alert">...</div>Using icons inside an alert box.
<div class="alert alert-success" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="d-flex align-items-center justify-content-start">
<i class="icon ion-ios-checkmark alert-icon tx-size-32 mg-t-5 mg-xs-t-0"></i>
<span><strong>Well done!</strong> Successful alert message.</span>
</div>
</div>Having a bigger size to emphasize an alert
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
<div class="alert alert-danger alert-bordered pd-y-20" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="d-flex align-items-center justify-content-start">
<i class="icon ion-ios-close alert-icon tx-size-52 tx-danger mg-r-20"></i>
<div>
<h5 class="mg-b-2 tx-danger">Oh snap! ...</h5>
<p class="mg-b-0 tx-gray">Neque porro quisquam est...</p>
</div>
</div>
</div>A collection of growl messages that appear in any corner of the window.
Your card has been verified.
We are unable to verify your credit card.
Image1.png in Documents/Images/
Downloads/MyResume.pdf
Xcode_8_beta_6.xip in 4.1GB - apple.com
10% of the World’s population is left handed.