W3CSS Alerts

Alerts are used to alert user of some danger, warning, success or some information. For instance if user has filled the form and press submit you can show an alert to the user displaying that form has successfully been submitted or you can use warning alert which says that some fields are not filled and so on. To create W3CSS alerts, we again have to be thankful to w3-panel class.

W3CSS Alerts

Take a look at the following example to see how simple it is to create W3CSS alerts.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    

    <div class="w3-panel w3-red">
      <h3>Danger!</h3>
      <p>Red alert indicates a dangerous situation</p>
    </div>
    
     <div class="w3-panel w3-green">
      <h3>Success!</h3>
      <p>Green alert indicates a successfull situation</p>
    </div> 
    
    <div class="w3-panel w3-yellow">
      <h3>Warning</h3>
      <p>Yellow alerts are used for warning purposes</p>
    </div> 
    
    <div class="w3-panel w3-blue">
      <h3>Information</h3>
      <p>Blue alerts are used for information purposes.</p>
    </div> 

</body>
    

</html>

Download the code Try the code

In the above example we created four most commonly used alerts i.e. danger, success, warning and info. You can see that we only used w3-panel and background color class to create these alerts. You can also create alerts that can be closed by clicking on cross button at the top right of the alert box. Take a look at the following example.

Alerts with close button

To create an alert box with close button, place a span before the heading text. Set the onclick event of the span to make the parent’s display property to none. Inside the span create a “x” icon using the “×” symbol. Style it so that it is clickable and is visible at the top right of the alert box. Take a look at the following code.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    

    <div class="w3-panel w3-red w3-display-container">
  <span onclick="this.parentElement.style.display='none'"
  class="w3-button w3-red w3-large w3-display-topright">&times;</span>
  <h3>Danger!</h3>
  <p>Red alert indicated dangerous situation.</p>
</div>
    
 <div class="w3-panel w3-green w3-display-container">
  <span onclick="this.parentElement.style.display='none'"
  class="w3-button w3-green w3-large w3-display-topright">&times;</span>
  <h3>Success!</h3>
  <p>Green alert indicates a successful situation. </p>
</div>


</body>
    

</html>

Download the code Try the code

Alerts as Cards

Just like quotes you can use alerts as cards. To do so, simply use w3-card classes. Another important thing to note here is that apart from w3-panel class you can also use w3-container class. Take a look at the following code snippet.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    

   <div class="w3-container w3-pink w3-card-2">
    <p>w3-card-2</p>
  </div>

  <div class="w3-container w3-light-blue w3-round-xxlarge w3-card-4">
    <p>w3-card-4</p>
  </div>


</body>
    

</html>

Download the code Try the code

In the above webpage we create an alert box using a card. Also we displayed how can we create a rounded alert box. In the next article, we shall see how to create “tables” in W3CSS.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .