Introduction
This chapter demonstrates about the W3.CSS Panels which is used add top, bottom and left, right paddings to HTML elements and following are the concepts covered in this chapter.
- Panel Class
- Different Panels
Description
By using w3-panel user can get the top and bottom margins which can add 16px and also which adds left and right padding as 16px to HTML elements. The code below demonstrates the panel class as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Displaying Panels</h2>
<p>Panels are the same as containers except for an added top and bottom margin.</p>
<div class="w3-panel w3-red">
<p>SPLESSONS panel.</p>
</div>
<div class="w3-panel w3-blue">
<p>SPLESSONS panel.</p>
</div>
<div class="w3-container w3-red">
<p>SPLESSONS container.</p>
</div>
<div class="w3-container w3-blue">
<p>SPLESSONS container.</p>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
User can use w3-panels for different purposes to get the different effects to the web pages. The pannels gives more effective to the content some various panels are listed below.
Panels for Quotes
User can display the quotes by using the Panel. w3-panel class is the perfect way to display the quotes. The code below demonstrates displaying the Panel for quotes.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Panels for Quotes</h2>
<p>Simple Programming Lessons Tutorials.</p>
<div class="w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif">
<p><i>Simple Programming Lessons Tutorials.</i></p>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Panels for Notes
User can display perfect notes by using the w3-panel the notes can be displayed with pale color and colored left bar. The code below demonstrates the displaying panel for notes as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Panels for Notes</h2>
<p>The w3-panel class can be used to display notes:</p>
<div class="w3-panel w3-pale-green w3-leftbar w3-border-green">
<p>SPLESSONS to enhance our knowledge of programming by presenting several different articles to the viewers and by participating in knowledge enriching discussions on the website.</p>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Rounded panels
User can also get the rounded Panels by using the w3-panel which is more effective to display. the code below demonstrates the rounded panel as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Rounded Panels</h2>
<div class="w3-panel w3-blue w3-round-xlarge">
<p>SPLESSONS to enhance our knowledge of programming by presenting several different articles to the viewers and by participating in knowledge enriching discussions on the website.</p>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Panel as cards
User can get the panel as cards by using the w3-panel which is the perfect way to get the panel as cards. The code below demonstrates the panel as cards as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Panels as Cards</h2>
<div class="w3-panel w3-blue w3-card-8">
<p>SPLESSONS to enhance our knowledge of programming by presenting several different articles to the viewers and by participating in knowledge enriching discussions on the website.</p>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Alert Panel
User can also display the alert message by using the w3-panel. in order to make it as alert user need to use the strong colors the code below demonstrates to alert panel as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Panels for Alerts</h2>
<p>The w3-panel class can be used to display alerts.</p>
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Simple Programming Lessons Tutorials.</p>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- Panels for Quotes
- Panels for Notes
- Rounded panels
- Panel as cards
- Alert Pannel
Key Points
- User can also display alert messages by using panels.
- Panels is the Perfect way to display the quotes.
- Panels will give more effective.