Skip to content

Instantly share code, notes, and snippets.

@tarunsankhla

tarunsankhla/alert.html

Created February 6, 2022 09:08
Show Gist options
  • Save tarunsankhla/868b2456366119886d012fb3ddb1007b to your computer and use it in GitHub Desktop.
Save tarunsankhla/868b2456366119886d012fb3ddb1007b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment