Displaying Alerts
Danger!
Red often indicates a dangerous or potentially negative action.
Warning!
Yellow and orange often indicates a warning that might need attention.
Success!
Green often indicates a successful or positive action.
Info!
Blue often indicates a neutral informative change or action.
An alert box is just a w3-container with a color:
Example
<div class="w3-container w3-red">
<h3>Danger!</h3>
<p>Red often
indicates a dangerous or potentially negative action.</p>
</div>
Try It Yourself »
W3.CSS Colors
Alerts are often displayed with a strong color, but any color can be used:
Danger!
Red often indicates a dangerous or potentially negative action.
Warning!
Yellow often indicates a warning that might need attention.
Success!
Green often indicates something successful or positive.
Danger!
Warning!
Success!
Closing Alerts
To close these containers, click on the X in the upper right corner:
Danger!
Red often indicates a dangerous or potentially negative action.
Warning!
Yellow often indicates a warning that might need attention.
Success!
Green often indicates a successful or positive action.
Closing an alert can be done using an onclick event on a w3-closebtn:
Example
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn">×</span>
Try It Yourself »
Rounded Alerts
Use the w3-round classes if you want rounded corners:
w3-round
w3-round-large
w3-round-xxlarge
Alert as a Card
w3-card-8