Professional Documents
Culture Documents
com LOG IN
Bootstrap 4 Alerts
❮ Previous Next ❯
Bootstrap 4 Alerts
Bootstrap 4 provides an easy way to create predefined alert messages:
Warning! This alert box indicates a warning that might need attention. ×
Alerts are created with the .alert class, followed by one of the contextual classes .alert-success , .alert-info , .alert-warning ,
.alert-danger , .alert-primary , .alert-secondary , .alert-light or .alert-dark :
Example
Try it Yourself »
Alert Links
Add the alert-link class to any links inside the alert box to create "matching colored links":
Example
Try it Yourself »
Closing Alerts
Click on the "x" symbol to the right to close me. ×
To close the alert message, add a .alert-dismissible class to the alert container. 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).
Example
Try it Yourself »
Tip: × (×) is an HTML entity that is the preferred icon for close buttons, rather than the letter "x".
For a list of all HTML Entities, visit our HTML Entities Reference.
Animated Alerts
Click on the "x" symbol to the right to close me. I will "fade" out. ×
The .fade and .show classes adds a fading effect when closing the alert message:
Example
❮ Previous Next ❯
COLOR PICKER
LIKE US
Get your
certification today!
View options
HOW TO
Tabs
Dropdowns
Accordions
Side Navigation
Top Navigation
Modal Boxes
Progress Bars
Parallax
Login Form
HTML Includes
Google Maps
Range Sliders
Tooltips
Slideshow
Filter List
Sort List
Certificates
HTML
CSS
JavaScript
Python
SQL
PHP
And more
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed
to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy
policy.