W3.CSS Containers and Panels

02 Mar, 2021
W3.CSS provides web developers with the two most useful classes i.e. container and panels. They are used to place content together with same font-color, background-color, font-size, font-family, etc.
w3-container: This class is used to add 16px padding on both the left and right side of the element. It can be used with all the HTML5 container elements i.e. div, article, section, header, footer, etc. All the elements inside this class share the same font-size, font-color, padding, alignment, etc.
Example: Using the w3-container class in the HTML page.
HTML
<!DOCTYPE html><html>  <head>      <!-- Adding W3.CSS file through external link -->    <link rel="stylesheet" href=        "https://www.w3schools.com/w3css/4/w3.css">  </head>  <body>    <!-- w3-container is used to add 16px         padding to any HTML element  -->    <!-- w3-center is used to set the content         of the element to the center. -->    <div class="w3-container w3-center">          <!-- w3-text-green sets the text             color to green. -->        <!-- w3-xxlarge sets font size to 32px. -->        <h2 class="w3-text-green w3-xxlarge">            Welcome To GFG        </h2>    </div>      <!-- w3-pink sets the background color pink -->    <div class="w3-container w3-pink">          <!-- w3-text-white sets the text             color to white -->        <p class="w3-text-white ">            GeeksforGeeks is a Computer Science             portal for geeks. It contains well             written, well thought and well             explained computer science and             programming articles, quizzes etc.        </p>    </div></body>  </html>
Output:
w3-panel: This class adds 16px padding on all sides i.e. top, right, bottom, left. It can also be used with all the HTML5 container elements i.e. div, article, section, header, footer, etc. All the elements inside this class share the same font-size, font-color, padding, alignment, etc.
Example: Using the w3-panel class in the HTML page.
HTML
<!DOCTYPE html><html>  <head>      <!-- Adding W3.CSS file through external link -->    <link rel="stylesheet" href=        "https://www.w3schools.com/w3css/4/w3.css">  </head>  <body>    <!-- w3-container is used to add 16px         padding to any HTML element.  -->    <!-- w3-center is used to set the content         of the element to the center. -->    <div class="w3-container w3-center">          <!-- w3-text-green sets the text             color to green. -->        <!-- w3-xxlarge sets font size to 32px. -->        <h2 class="w3-text-green w3-xxlarge">            Welcome To GFG        </h2>    </div>      <!-- w3-pink sets the background color pink -->    <!-- w3-panel is used to 16px padding         from all the direction -->    <div class="w3-panel w3-pink">          <!-- w3-text-white sets the text             colur to white. -->        <p class="w3-text-white">            GeeksforGeeks is a Computer Science             portal for geeks. It contains well             written, well thought and well             explained computer science and             programming articles, quizzes etc.        </p>    </div></body>  </html>
Output:
You can see that the gap between heading and paragraph is increased because we have w3-panel class.
Note:
If you use paragraph tag then automatically padding is added between the content and the division.
You can use panels and containers to make styles like notes, quotes, alerts, cards and many more.
W3.CSS
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Form validation using jQuery
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array