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
I am a panel
The w3-panel class adds a 16px top and bottom margin and a 16px left and right padding to any HTML element.
<div class="w3-panel w3-red">
<p>I am a panel.</p>
</div>
The w3-panel class is perfect for displaying notes.
Notes are often displayed with a pale color:
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
<div class="w3-panel w3-pale-green">
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
To learn more about W3.CSS Notes please visit the W3.CSS Notes chapter.
The w3-panel class is perfect for displaying quotes.
"Make it as simple as possible, but not simpler."
<div class="w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif">
<p><i>"Make it as simple as possible, but not simpler."</i></p>
</div>
To learn more about W3.CSS Quotes please visit the W3.CSS Quotes chapter.
The w3-panel class is perfect for displaying alerts.
Alerts are often displayed using a strong color:
Red often indicates a dangerous or negative situation.
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often
indicates a dangerous or negative situation.</p>
</div>
To learn more about W3.CSS Alerts please visit the W3.CSS Alerts chapter.
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
<div class="w3-panel w3-blue w3-card-4">
<p>London is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
<div class="w3-panel w3-blue w3-round-xlarge">
<p>London is the most populous city in the United Kingdom,
with
a metropolitan area of over 9 million inhabitants.</p>
</div>
Hiding a panel is easy.
Click on the X to close this panel.
Click on the X to close this panel.
<div class="w3-panel
w3-display-container">
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">X</span>
<p>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>
Showing (a hidden) panel is easy:
Show panel
Click on the X to close this panel.
Click on the X to close this panel.
<button class="w3-btn" onclick="document.getElementById('id01').style.display='block'">Show
panel</button>
<div id="id01" class="w3-panel w3-green
w3-display-container" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">X</span>
<p>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>