W3.CSS Panels

Panels are the same as containers but extra feature is to added top and bottom margin.

  • The w3-panel class adds a 16px top and bottom margin and a 16px left and right padding to any HTML element.
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<link rel="stylesheet" href="w3.css">
<body>

<div class="w3-container">
<h2> Different between Panel and Container</h2>

<div class="w3-panel w3-red">
<p>This is a paragraph panel.</p>
</div>
<div class="w3-panel w3-green">
<p>This is a paragraph panel.</p>
</div>

<div class="w3-container w3-red">
<p>This is a paragraph container.</p>
</div>
<div class="w3-container w3-green">
<p>This is a paragraph container.</p>
</div>
</div>

</body>
</html>
Output
W3.CSS

Different between Panel and Container

This is a paragraph panel.

This is a paragraph panel.

This is a paragraph container.

This is a paragraph container.

W3.CSS Card Panels

  • The w3-card-4 class adds shadow any HTML element.
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>

<link rel="stylesheet" href="w3.css">
<body>

<div class="w3-container">
<h2> Use panel as card</h2>
<p>Using the w3-panel class can display cards:</p>

<div class="w3-panel w3-green w3-card-4">
<p>This paragraph is used to add card in pannel.</p>
</div>
</div>

</body>
</html>
Output
W3.CSS

Use panel as card

Using the w3-panel class can display cards:

This paragraph is used to add card in pannel.

W3.CSS Rounded Panels

The w3-round-size class adds rounded Panels.

  • tiny: Use the tiny class to display tiny panels.
  • small: Use the small class to display small panels.
  • large: Use the large class to display large panels.
  •  xlarge :Use the xlarge class to display an xlarge panels.
  • xxlarge :Use the xxlarge class to display an xxlarge panels.
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<link rel="stylesheet" href="w3.css">
<body>

<div class="w3-container">
<h3> Use of Rounded Panels</h3>
<div class="w3-panel w3-green w3-round-tiny">
<p> This paragraph is tiny Rounded Panels</p>
</div>
<div class="w3-panel w3-red w3-round-small">
<p> This paragraph is small Rounded Panels</p>
</div>
<div class="w3-panel w3-blue w3-round-large">
<p> This paragraph is large Rounded Panels</p>
</div>
<div class="w3-panel w3-orange w3-round-xlarge">
<p> This paragraph is xlarge Rounded Panels</p>
</div>
<div class="w3-panel w3-black w3-round-xxlarge">
<p> This paragraph is xxlarge Rounded Panels</p>
</div>

</div>


</body>
</html>
Output
W3.CSS

Use of Rounded Panels

This paragraph is tiny Rounded Panels

This paragraph is small Rounded Panels

This paragraph is large Rounded Panels

This paragraph is xlarge Rounded Panels

This paragraph is xxlarge Rounded Panels

CSS Framework Website development using W3.CSS Framework. W3.CSS is a Framework W3.CSS is a modern CSS framework with built-in responsiveness ...
Read More
W3.Css Containers W3. CSS Containers is predefine class use just like a external CSS. The W3-Container class adds a 16px left ...
Read More
W3.CSS Background colors The w3-color classes set the background color for any HTML element. Example <!DOCTYPE html> <html> <title>W3.CSS</title> <link ...
Read More
W3.CSS Text colors The W3-text-color classes set the background color for any HTML element. Example <!DOCTYPE html> <html> <title>W3.CSS</title> <link ...
Read More
W3.CSS Hover Colors The W3-hover-color classes define the background hover color for any HTML element. The W3-hover-text-color classes define the text hover ...
Read More
W3.CSS Panels Panels are the same as containers but extra feature is to added top and bottom margin. The w3-panel ...
Read More
W3.CSS Borders w3-border : Using this class to add borders (top, right, bottom, left) to an element.w3-border-top : Using this ...
Read More
W3.CSS Bar Note : w3-topbar, w3-bottombar, w3-leftbar, and w3-rightbar classes are used to add thick borders to an element. w3-bottombar ...
Read More
W3.CSS Text Alignment The w3-left-align classes are used for left alignment elements. The w3-right-align classes are used for right alignment ...
Read More
W3.CSS Wide Text The w3-wide classes are used for wider text. Example <!DOCTYPE html> <html> <title>W3.CSS</title> <link rel="stylesheet" href="w3.css"> <body> ...
Read More
English Hindi