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
W3.CSS includes a responsive, mobile-first grid system to handle layout
W3.CSS's grid system is responsive, and the columns will re-arrange automatically depending on the screen size:
Class | Description |
---|---|
w3-half | Occupies 1/2 of the window (on medium and large screens) |
w3-third | Occupies 1/3 of the window (on medium and large screens) |
w3-twothird | Occupies 2/3 of the window (on medium and large screens) |
w3-quarter | Occupies 1/4 of the window (on medium and large screens) |
w3-threequarter | Occupies 3/4 of the window (on medium and large screens) |
w3-rest | Occupies the rest of the column width |
w3-col | Defines one column in a 12-column responsive grid |
w3-mobile | Adds mobile-first responsiveness to a cell (column). Displays elements as block elements on mobile devices. |
The responsive classes above must be placed inside a w3-row class (or w3-row-padding class) to be fully responsive.
Class | Description |
---|---|
w3-row | Container for responsive classes, with no padding |
w3-row-padding | Container for responsive classes, with 8px left and right padding |
w3-content | Container for fixed size centered content |
w3-hide-small | Hides content on small screens (less than 601px) |
w3-hide-medium | Hides content on medium screens |
w3-hide-large | Hides content on large screens (larger than 992px) |
l1 - l12 | Responsive sizes for large screens |
m1 - m12 | Responsive sizes for medium screens |
s1 - s12 | Responsive sizes for small screens |
The width of the w3-half class is 1/2 of the parent element (style="width:50%").
On screens smaller than 601 pixels it resizes to 100%.
<div class="w3-row">
<div class="w3-half w3-container w3-green">
<h2>w3-half</h2>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
</div>
</div>
The width of the w3-third class is 1/3 of the parent element (style="width:33.33%").
On screens smaller than 601 pixels it resizes to 100%.
<div class="w3-row">
<div class="w3-third w3-container w3-green">
<h2>w3-third</h2>
</div>
<div class="w3-third w3-container">
<h2>w3-third</h2>
</div>
<div class="w3-third w3-container">
<h2>w3-third</h2>
</div>
</div>
The width of the w3-twothird class is 2/3 of the parent element (style="width:66.66%").
On screens smaller than 601 pixels it resizes to 100%.
<div class="w3-row">
<div class="w3-green w3-container
w3-twothird">
<h2>w3-twothird</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div>
The width of the w3-quarter class is 1/4 of the parent element (style="width:25%").
On screens smaller than 601 pixels it resizes to 100%.
<div class="w3-row">
<div class="w3-green w3-container
w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div>
The width of the w3-threequarter class is 3/4 of the parent element (style="width:75%").
On screens smaller than 601 pixels it resizes to 100%.
<div class="w3-row">
<div class="w3-green w3-container
w3-threequarter">
<h2>w3-threequarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div>
<div class="w3-row">
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
</div>
The w3-col class defines one column in a 12-column responsive grid.
The w3-rest class will occupy the rest of the width:
I am 150px
I am the rest
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>I
am 150px</p></div>
<div class="w3-rest
w3-green"><p>I am the rest</p></div>
</div>
You can also use the CSS width property to set the width in percent:
20%
60%
20%
<div class="w3-row">
<div class="w3-col"
style="width:20%"><p>20%</p></div>
<div class="w3-col" style="width:60%"><p>60%</p></div>
<div
class="w3-col" style="width:20%"><p>20%</p></div>
</div>
The w3-content class defines a container for fixed size centered content. Use the CSS max-width property to override the default width (980px).
<body class="w3-content" style="max-width:500px">
page content...
</body>
The w3-row class defines a container with no padding, while the w3-row-padding class adds a 8px left and right padding to each column:
w3-row:
w3-row-padding:
w3-row:
w3-row-padding:
<div class="w3-row">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col
s4"><img src="img_snowtops.jpg"></div>
</div>
<div class="w3-row-padding">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col
s4"><img src="img_snowtops.jpg"></div>
</div>
The w3-stretch class removes the right and left margins from an element. This class is often used to stretch a padded row:
An example with w3-stretch:
An example without w3-stretch:
<div class="w3-row-padding w3-section w3-stretch">
<div
class="w3-col s4">
<img src="img_nature_wide.jpg">
</div>
<div class="w3-col s4">
<img src="img_snow_wide.jpg">
</div>
<div class="w3-col s4">
<img
src="img_mountains_wide.jpg">
</div>
</div>
The w3-hide-small, w3-hide-medium, and w3-hide-large classes hide elements on specific screen sizes.
w3-hide-small will be hidden on small screens (phones)
w3-hide-medium will be hidden on medium screens (tablets)
w3-hide-large will be hidden on large screens (laptops/desktop)
<div class="w3-container w3-hide-small w3-red">
<p>w3-hide-small will
be hidden on small screens (phones)</p>
</div>
<div
class="w3-container w3-hide-medium w3-green">
<p>w3-hide-medium will
be hidden on medium screens (tablets)</p>
</div>
<div
class="w3-container w3-hide-large w3-blue">
<p>w3-hide-large will be
hidden on large screens (laptops/desktop)</p>
</div>
The w3-mobile class adds mobile-first responsiveness to any element.
It adds display:block and width:100% to an element on screens that are less than 600px wide.
<a class="w3-button w3-mobile" href="#">Link</a>
The built-in responsiveness of W3.CSS uses the DP size of a screen.
W3.CSS will treat an iPhone 6 with a resolution of 750 x 1334 pixels as a small screen of 375 x 667 pixels DP.
Small screens are less than 601 pixels DP, medium screens are less than 993 pixels DP.
Below is a list of typical device resolutions and reported DP sizes:
Resolution
640 x 960
DP
320 x 480
Resolution
640 x 1136
DP
320 x 528
Resolution
750 x 1334
DP
375 x 667
Resolution
1080 x 1920
DP
414 x 736
Resolution
1440 x 2560
DP
360 x 640
Resolution
1440 x 2560
DP
400 x 853
Resolution
1440 x 2560
DP
411 x 731
Resolution
768 x 1024
DP
768 x 1024
Resolution
1536 x 2048
DP
768 x 1024
Resolution
1366 x 768
DP
1366 x 768
Resolution
1920 x 1080
DP
1920 x 1080
W3.CSS also supports an advanced 12 column responsive fluid grid.
Resize the page to see the effect!
This part will occupy 12 columns on a small screen, 4 on a medium screen, and 3 on a large screen.
This part will occupy 12 columns on a small screen, 8 on a medium screen, and 9 on a large screen.
You will learn a lot more about the fluid grid in a later chapter.