HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
The w3-panel class is the perfect class to display all types of alerts
Yellow often indicates a warning that might need attention.
Yellow often indicates a warning that might need attention.
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that
might need attention.</p>
</div>
Green often indicates something successful or positive.
Green often indicates something successful or positive.
<div class="w3-panel w3-green">
<h3>Success!</h3>
<p>Green often indicates something successful
or positive.</p>
</div>
Blue often indicates a neutral informative change or action.
Blue often indicates a neutral informative change or action.
<div class="w3-panel w3-blue">
<h3>Information!</h3>
<p>Blue often indicates a neutral
informative change or action.</p>
</div>
The w3-container class can also be used to display alerts:
<div class="w3-container w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Alerts are often displayed in special colors, but any color can be used:
Red often indicates a dangerous or negative situation.
Red often indicates a dangerous or negative situation.
Red often indicates a dangerous or negative situation.
Red often indicates a dangerous or negative situation.
Red often indicates a dangerous or negative situation.
<div class="w3-panel w3-blue-grey">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
To close the alert box, click on the X in the upper right corner:
Red often indicates a dangerous or negative situation.
To create the X that closes the alert, add a <span> element with class w3-button and an onclick event:
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">×</span>
Tip: The HTML × entity is the preferred icon for close buttons (rather than the letter "X").
Use the w3-round classes if you want rounded corners:
Here w3-round is used.
Here w3-round-large is used.
Here w3-round-xxlarge is used.
<div class="w3-panel w3-green w3-round">
Use a w3-card class if you want the alert to be displayed as a card:
Yellow often indicates something that needs attention.
<div class="w3-panel w3-yellow w3-card-4">