W3.CSS Containers and Panels
Last Updated :
30 Sep, 2022
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 >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "w3-container w3-center" >
< h2 class = "w3-text-green w3-xxlarge" >
Welcome To GFG
</ h2 >
</ div >
< div class = "w3-container w3-pink" >
< 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 >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "w3-container w3-center" >
< h2 class = "w3-text-green w3-xxlarge" >
Welcome To GFG
</ h2 >
</ div >
< div class = "w3-panel w3-pink" >
< 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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...