alerts

W3.CSS Alerts

Use the w3-panel and w3-border classes to create styled alerts.

Basic Alerts

<div class="w3-panel w3-red w3-border">
  <p>Error: Something went wrong!</p>
</div>

<div class="w3-panel w3-green w3-border">
  <p>Success: Your action was successful!</p>
</div>

Closable Alerts

Use JavaScript to make the alerts closable:

<div class="w3-panel w3-yellow w3-border" id="alert">
  <span onclick="document.getElementById('alert').style.display='none'"
        class="w3-button w3-display-topright">&times;</span>
  <p>Warning: Please check your input.</p>
</div>