W3.CSS Alerts
Alerts
Alerts are messages that notify the user about something important.
W3.CSS alerts are commonly created with w3-panel.
A Simple Alert
An alert can use a strong color to attract attention.
Danger!
Something went wrong. Please try again.
Example
<div class="w3-panel w3-danger">
<h3>Danger!</h3>
<p>Something went wrong. Please try again.</p>
</div>
Try it Yourself »
Closable Alerts
Alerts are often temporary messages that the user can close.
Add a close button with w3-display-topright.
Warning!
Your session will expire soon.
Example
<div class="w3-panel w3-warning w3-display-container">
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-topright">×</span>
<h3>Warning!</h3>
<p>Your session will expire soon.</p>
</div>
Try it Yourself »
The HTML × symbol (×) is commonly used for close buttons.
Alert Types
W3.CSS 5 provides semantic color classes that are useful for alerts.
Information: A new version is available.
Success: Your changes have been saved.
Warning: Your session will expire soon.
Danger: Your changes could not be saved.
Example
<div class="w3-panel w3-info">
<p><b>Information:</b> A new version is available.</p>
</div>
<div class="w3-panel w3-success">
<p><b>Success:</b> Your changes have been saved.</p>
</div>
<div class="w3-panel w3-warning">
<p><b>Warning:</b> Your session will expire soon.</p>
</div>
<div class="w3-panel w3-danger">
<p><b>Danger:</b> Your changes could not be saved.</p>
</div>
Try it Yourself »
Do not rely on color alone.
Use words like Information, Success, Warning, and Danger to explain the meaning.
Alerts with Symbols
HTML symbols and emojis can make the purpose of an alert easier to recognize.
✓ Success! Your changes have been saved.
📌 Note: Remember to save your work.
✖ Error! Your changes could not be saved.
Example
<div class="w3-panel w3-success">
<p>✓ <b>Success!</b> Your changes have been saved.</p>
</div>
Try it Yourself »
Alert with an Action
An alert can also tell the user what to do next.
Update Available
A new version of the application is available.
Example
<div class="w3-panel w3-info">
<h3>Update Available</h3>
<p>A new version of the application is available.</p>
<p>
<button class="w3-button w3-white">Update Now</button>
<button class="w3-button">Later</button>
</p>
</div>
Try it Yourself »
What You Have Learned
- Alerts notify users about important events
w3-panelcan be used to create alerts- Alerts can be closed with a button and a small JavaScript action
- Semantic colors help communicate the type of alert
- Symbols and emojis can make alerts easier to recognize
- Alerts can contain buttons and other actions
More Examples
Explore more ways to style W3.CSS alerts.
Rounded Alerts
Success! Your changes have been saved.
Success! Your changes have been saved.
Success! Your changes have been saved.
Example
<div class="w3-panel w3-success w3-round">
<p><b>Success!</b> Your changes have been saved.</p>
</div>
Try it Yourself »
Alert as a Card
Warning!
Your session will expire soon.
Example
<div class="w3-panel w3-warning w3-card">
<h3>Warning!</h3>
<p>Your session will expire soon.</p>
</div>
Try it Yourself »
Alerts with Other Colors
You can also use regular W3.CSS color classes when the color is part of the design rather than the meaning.
Special Offer! Available until Friday.
Maintenance: The server will restart tonight.
Example
<div class="w3-panel w3-purple">
<p><b>Special Offer!</b> Available until Friday.</p>
</div>
Try it Yourself »
