W3.CSS Containers
W3.CSS provides two classes w3-container, w3-panel that are used mostly with container elements (like <div>, <header>, <footer>, <article>, <section> etc) of HTML for providing common padding and margin to the elements.
w3-container : The w3-container class is used to add 16px left and right padding to HTML elements.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container w3-yellow">
<h1> ABC</h1>
<p> I am Container 1 </p>
</div>
<div class="w3-container w3-red">
<h1> DEF</h1>
<p> I am Container 2 </p>
</div>
</body>
</html>
Qus. 1 : w3-navbar creates a
- horizontal navigation bar
- inside the navigation bar
- force the navigation bar
- navigation bar to stay at the top of the page
- Adds animation
- Adds padding automatically
- Makes div inline
- Adds margin only
- Panel adds margins, container adds padding
- Panel supports padding, container doesn't
- Container supports borders, panel doesn't
- No difference
- w3-right
- w3-float-right
- w3-align-right
- w3-pull-right
- Add the w3-responsive class to a <div>.
- Add the w3-container class to a <div>.
- Add the w3-center class to a <div>.
- Add the w3-block class to a <div>.
- Adds margin
- Takes the remaining width
- Centers content
- Makes the column fixed