Bootstrap 4 Alerts

Bootstrap 4 Alerts

Learn  Bootstrap 4 Alerts 

Bootstrap 4

Bootstrap class .alert is used to create alert bars which can provide contextual feedback The contextual classes are added using class .alert-*.

<!-- class="alert-success" -->
<div class="alert alert-success" role="alert">
  <strong>Success!</strong> Process Successfull, Congratulations.. 
</div>
<!-- class="alert-info" -->
<div class="alert alert-info" role="alert">
  <strong>Heads up!</strong> This need some part of your attention, though not urgent.
</div>
<!-- class="alert-warning" -->
<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong> Caution, things going really bad now
</div>
<!-- class="alert-danger" -->
<div class="alert alert-danger" role="alert">
  <strong>Danger ! </strong> System Broken, kindly wait while it gets fixed.
</div>

Bootstrap 4 Alerts Link Color

Bootstrap 4 Alerts

To create matching color links within alerts use class .alert-link

<!-- class="alert-success" -->
<div class="alert alert-success" role="alert">
  <strong>Success!</strong> Process Successfull, <a href="#" class="alert-link">Congratulations..</a> 
</div>
<!-- class="alert-info" -->
<div class="alert alert-info" role="alert">
  <strong>Heads up!</strong> This need some part of your <a href="#" class="alert-link">attention</a>, though not urgent.
</div>
<!-- class="alert-warning" -->
<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong> Caution, things going really <a href="#" class="alert-link">bad</a> now
</div>
<!-- class="alert-danger" -->
<div class="alert alert-danger" role="alert">
  <strong>Danger ! </strong> System <a href="#" class="alert-link">Broken</a>, kindly wait while it gets fixed.
</div>

 

Bootstrap 4  Dismiss Alerts

Bootstrap 4 Alert Dismiss

A Dismissable alert is created using class .alert-dismissible, the close button is created using class .close

The Animation effects are added using the class .fade and .in

 

<div class="alert alert-warning alert-dismissible fade in" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
    <span class="sr-only">Close</span>
  </button>
  <strong>Warning!</strong> Caution, things going really <a href="#" class="alert-link">bad</a> now
</div>

 

 

Thank You for visit Webriceter.com Design & Develop by Abdur Rahaman