Bootstrap 4
  Prev Page
Next Page  
Bootstrap 4 Alerts
Bootstrap 4 provides an easy way to create a stylized alert message box with its alert component. Alerts are created with the .alert class, followed by one of the contextual classes .alert-primary, .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-secondary, .alert-light and .alert-dark. 
<div class="alert alert-primary" role="alert">
  This is a primary alert message ...!
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert message ...!
</div>
<div class="alert alert-success" role="alert">
  This is a success alert message ...!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert message ...!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert message ...!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert message ...!
</div>
<div class="alert alert-light" role="alert">
  This is a light alert message ...!
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert message ...!
</div>
Output :
Link Alerts

Add the .alert-link class to quickly provide matching colored links within any alert.

<div class="alert alert-primary" role="alert">
  This is a primary alert..! <a href="#" class="alert-link">Free Time Learn</a>.
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert..! <a href="#" class="alert-link">Free Time Learn</a>.
</div>
<div class="alert alert-success" role="alert">
  This is a success alert..! <a href="#" class="alert-link">Free Time Learn</a>.
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert..! <a href="#" class="alert-link">Free Time Learn</a>.
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert..! <a href="#" class="alert-link">Free Time Learn</a>.
</div>
<div class="alert alert-info" role="alert">
  This is a info alert..! <a href="#" class="alert-link">Free Time Learn</a>.
</div>
<div class="alert alert-light" role="alert">
  This is a light alert..! <a href="#" class="alert-link">Free Time Learn</a>.
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert..! <a href="#" class="alert-link">Free Time Learn</a>.
</div>
Output :
Dismissible(Closing) Alerts

You can create dismissible alerts by adding Bootstrap's .alert-dismissible class. Then add class="close" and data-dismiss="alert" to a link or a button element (when you click on this the alert box will disappear).

Here we use &times; to create the Close icon (×).

<div class="alert alert-primary alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    This is a primary alert message..!
</div>
<div class="alert alert-secondary alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    This is a secondary alert message..!
</div>
<div class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    This is a success alert message..!
</div>
<div class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    This is a danger alert message..!
</div>
<div class="alert alert-warning alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    This is a warning alert message..!
</div>
<div class="alert alert-info alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    This is a info alert message..!
</div>
<div class="alert alert-light alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    This is a light alert message..!
</div>
<div class="alert alert-dark alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    This is a dark alert message..!
</div>
Output :
Fading Effect

The alert a fading effect when closing them by adding the .fade and .show classes.

<div class="alert alert-primary alert-dismissable fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    This is a primary alert message..!
</div>
<div class="alert alert-secondary alert-dismissable fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    This is a secondary alert message..!
</div>
<div class="alert alert-success alert-dismissable fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    This is a success alert message..!
</div>
<div class="alert alert-danger alert-dismissable fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    This is a danger alert message..!
</div>
<div class="alert alert-warning alert-dismissable fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    This is a warning alert message..!
</div>
<div class="alert alert-info alert-dismissable fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    This is a info alert message..!
</div>
<div class="alert alert-light alert-dismissable fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    This is a light alert message..!
</div>
<div class="alert alert-dark alert-dismissable fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    This is a dark alert message..!
</div>
Output :
  Prev Page
Next Page