alert.html

<legend class="divider">Alert</legend>
<div>Alerts are for displaying message based on user action and mostly used for communicating the state of system. <br/>
    You can use the className of alert and it will set the default size. <br/>
    It also contains variation in outline and based on usecase like
    <br/>
    Sucess :
    <li>alert-outline-sucess</li> 
    <li>alert-sucess</li><br/>  
    Warning :
    <li>alert-outline-warning</li> 
    <li>alert-warning</li><br/>  
    Danger :
    <li>alert-outline-danger</li> 
    <li>alert-danger</li><br/>  
    Primary :
    <li>alert-outline-primary</li> 
    <li>alert-primary</li><br/>  
     </div>
<div class="alert alert-outline-primary">
    <span class="material-icons-round">
        thumb_up
        </span>
    This is a primary alert- Check it out!
</div>

<div class="alert alert-outline-danger">
    <span class="material-icons-round">
        notification_important
        </span>
    This is a Danger alert- Check it out!
</div>


<div class="alert alert-outline-sucess">
    <span class="material-icons-round">
        verified
        </span>

        This is a sucess alert- Check it out!
</div>
<div class="alert alert-outline-warning">
    <span class="material-icons-round">
        new_releases
        </span>                                    
    This is a warning alert- Check it out!
</div>

<div class="alert alert-primary">
    <span class="material-icons-round">
        thumb_up
        </span>
    This is a primary alert- Check it out!
</div>
<div class="alert alert-danger">
    <span class="material-icons-round">
        notification_important
        </span>
    This is a Danger alert- Check it out!
</div>

<div class="alert alert-sucess">
    <span class="material-icons-round">
        verified
        </span>
    This is a sucess alert- Check it out!
</div>

<div class="alert alert-warning">
    <span class="material-icons-round">
        new_releases
        </span>                                  
    This is a warning alert- Check it out!
</div>