Bootstrap Alert

Alerts
Alerts are accessible for any length of text, with a dismiss button as an option. Use one of the eight essential contextual classes for optimal style (e.g., .alert-success). Use the alerts jQuery plugin for inline dismissal.
Alert Types
Unlike some other Bootstrap components like Buttons, the Alerts do not come with a default or primary styling, because they are meant to alert the user in a specific way.
<div class="alert alert-success" role="alert">
Some action was completed successfully
</div>
<div class="alert alert-info" role="alert">
Here is some information. Just FYI.
</div>
<div class="alert alert-warning" role="alert">
Careful! You're about to do something dangerous.
</div>
<div class="alert alert-danger" role="alert">
An error (or something dangerous) happened!
</div>
Alert basic example
<div class="container">
<h2>Alerts</h2>
<div class="alert alert-success">
<strong>Success!</strong>
</div>
<div class="alert alert-info">
<strong>Info!</strong>
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> All foelds are required
</div>
<div class="alert alert-danger">
The username is required and can't be empty
</div>
</div>
Colored links
To rapidly provide matching coloured links within any alert, use the.alert-link utility class.
Example:
<div class="alert alert-primary" role="alert">
This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
This is a light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
Additional content
Additional HTML elements like as headings, paragraphs, and dividers can be included in alerts.
Example:
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
Animated Alerts
The .fade and .in classes adds a fading effect when closing the alert message.
<div class="alert alert-success fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> This is a good example!
</div>
Dismissible Alerts
To give an alert close functionality, all we need is to add data-dismiss="alert" to our close button.
<div class="alert alert-info alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Sphinx of black quartz, judge my vow
</div>
Link color in Alerts
To quickly provide a matching color for links inside any alert, we can use the .alert-link utility class.
Example:
<div class="alert alert-success">
You have won! Click <a href="#" class="alert-link">here</a> to claim your prize ...
</div>
<div class="alert alert-info">
You might want to check <a href="#" class="alert-link">this</a> instead.
</div>
<div class="alert alert-warning">
You are running out of coins. Buy more <a href="#" class="alert-link">here</a>.
</div>
<div class="alert alert-danger">
Something went wrong. You can try <a href="#" class="alert-link">again</a> or ...
</div>
ATutorialHub Related Guide
Comments (9)
User Comments

panduranga gupta
2021-07-05 07:03:13good website for learning and help me a lot

raju
2021-09-25 14:58:47The awsome website i am looking like for a long time, good work atutorialhub team keep doing

Shivani
2021-09-01 15:03:56Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

Harshitha
2021-09-10 15:05:45It is very helpful to students and easy to learn the concepts

Sowmya
2021-09-14 15:06:41Great job Tutorials are easy to understand Please make use of it

Zain Khan
2021-09-18 15:07:23Great content and customized courses.

Rudrakshi Bhatt
2021-09-09 15:08:10Well structured coursed and explained really well!

Pavana Somashekar
2021-09-11 15:09:08Good platform for beginners and learn a lot on this website

Sax
2021-09-25 19:35:50Nice website
Leave a Comment