Toggle navigation
TUTORIAL HOME
W3.CSS Built-In Responsiveness
❮ Previous Next ❯
W3.CSS includes a responsive, mobile-first grid system to handle layout:
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
3/4
1/4
1/4
1/4
1/2
1/4
1/2
1/4
50px
rest
1/4
rest
100px
45px
rest
W3.CSS Responsive Classes
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 w3-half Class
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%.
w3-half
w3-half
Example
<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 w3-third Class
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%.
w3-third
w3-third
w3-third
Example
<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 w3-twothird Class
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%.
w3-twothird
w3-third
Example
<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 w3-quarter Class
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%.
w3-quarter
w3-quarter
w3-quarter
w3-quarter
Example
<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 w3-threequarter Class
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%.
w3-threequarter
w3-quarter
Example
<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>
»
Combinations
w3-quarter
w3-half
w3-quarter
w3-quarter
w3-quarter
w3-half
w3-half
w3-quarter
w3-quarter
w3-third
w3-twothird
w3-quarter
w3-threequarter
Nested Rows
Example: w3-half Inside w3-half
<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>
»
Columns Using Rest
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
Example
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</
<div class="w3-rest w3-green"><p>rest</p></div>
</div>
»
Columns Using Percent
You can also use the CSS width property to set the width in percent:
20%
60%
20%
Example
<div class="w3-row">
<div class="w3-col" style="width:20%"><p>20%</p></
<div class="w3-col" style="width:60%"><p>60%</p></
<div class="w3-col" style="width:20%"><p>20%</p></
</div>
»
The w3-content Class
The w3-content class defines a container for fixed size centered content. Use the CSS max-width property to override the default width (980px).
Example
<body class="w3-content" style="max-width:500px">
page content...
</body>
»
w3-row vs. w3-row-padding
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-third
w3-third
w3-third
w3-row-padding:
w3-third
w3-third
w3-third
w3-row:
w3-row-padding:
Example
<div class="w3-row">
<div class="w3-third"><img src="img_lights.jpg"></div>
<div class="w3-third"><img src="img_nature.jpg"></div>
<div class="w3-third"><img src="img_fjords.jpg"></div>
</div>
<div class="w3-row-padding">
<div class="w3-third"><img src="img_lights.jpg"></div>
<div class="w3-third"><img src="img_nature.jpg"></div>
<div class="w3-third"><img src="img_fjords.jpg"></div>
</div>
»
Responsive Show / Hide
The w3-hide-small, w3-hide-medium, and w3-hide-large classes hide elements on specific screen sizes.
Note: Resize the browser window to understand how it works:
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)
Example
<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
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.
Example
<a class="w3-button w3-mobile" href="#">Link</a>
»
Screen Resolutions
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:
Iphone 4
Resolution
640 x 960
DP
320 x 480
Iphone 5
Resolution
640 x 1136
DP
320 x 528
Iphone 6
Resolution
750 x 1334
DP
375 x 667
Iphone 6s
Resolution
1080 x 1920
DP
414 x 736
Galaxy S6
Resolution
1440 x 2560
DP
360 x 640
Note 4
Resolution
1440 x 2560
DP
400 x 853
Nexus 6
Resolution
1440 x 2560
DP
411 x 731
iPad Mini
Resolution
768 x 1024
DP
768 x 1024
iPad
Resolution
1536 x 2048
DP
728 x 1024
Typical Laptop
Resolution
1366 x 768
DP
1366 x 768
Typical Desktop
Resolution
1920 x 1080
DP
1920 x 1080
12 Column Responsive Fluid Grid
W3.CSS also supports an advanced 12 column responsive fluid grid.
Resize the page to see the effect!
1
2
3
4
5
6
7
8
9
10
11
12
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.
1
2
3
4
5
6
7
8
9
10
11
12
You will learn a lot more about the fluid grid in a later chapter.
❮ Previous Next ❯
TUTORIAL HOME
W3.CSS Built-In Responsiveness
❮ Previous Next ❯
W3.CSS includes a responsive, mobile-first grid system to handle layout:
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
3/4
1/4
1/4
1/4
1/2
1/4
1/2
1/4
50px
rest
1/4
rest
100px
45px
rest
W3.CSS Responsive Classes
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 w3-half Class
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%.
w3-half
w3-half
Example
<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 w3-third Class
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%.
w3-third
w3-third
w3-third
Example
<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 w3-twothird Class
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%.
w3-twothird
w3-third
Example
<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 w3-quarter Class
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%.
w3-quarter
w3-quarter
w3-quarter
w3-quarter
Example
<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 w3-threequarter Class
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%.
w3-threequarter
w3-quarter
Example
<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>
»
Combinations
w3-quarter
w3-half
w3-quarter
w3-quarter
w3-quarter
w3-half
w3-half
w3-quarter
w3-quarter
w3-third
w3-twothird
w3-quarter
w3-threequarter
Nested Rows
Example: w3-half Inside w3-half
<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>
»
Columns Using Rest
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
Example
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</
<div class="w3-rest w3-green"><p>rest</p></div>
</div>
»
Columns Using Percent
You can also use the CSS width property to set the width in percent:
20%
60%
20%
Example
<div class="w3-row">
<div class="w3-col" style="width:20%"><p>20%</p></
<div class="w3-col" style="width:60%"><p>60%</p></
<div class="w3-col" style="width:20%"><p>20%</p></
</div>
»
The w3-content Class
The w3-content class defines a container for fixed size centered content. Use the CSS max-width property to override the default width (980px).
Example
<body class="w3-content" style="max-width:500px">
page content...
</body>
»
w3-row vs. w3-row-padding
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-third
w3-third
w3-third
w3-row-padding:
w3-third
w3-third
w3-third
w3-row:
w3-row-padding:
Example
<div class="w3-row">
<div class="w3-third"><img src="img_lights.jpg"></div>
<div class="w3-third"><img src="img_nature.jpg"></div>
<div class="w3-third"><img src="img_fjords.jpg"></div>
</div>
<div class="w3-row-padding">
<div class="w3-third"><img src="img_lights.jpg"></div>
<div class="w3-third"><img src="img_nature.jpg"></div>
<div class="w3-third"><img src="img_fjords.jpg"></div>
</div>
»
Responsive Show / Hide
The w3-hide-small, w3-hide-medium, and w3-hide-large classes hide elements on specific screen sizes.
Note: Resize the browser window to understand how it works:
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)
Example
<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
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.
Example
<a class="w3-button w3-mobile" href="#">Link</a>
»
Screen Resolutions
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:
Iphone 4
Resolution
640 x 960
DP
320 x 480
Iphone 5
Resolution
640 x 1136
DP
320 x 528
Iphone 6
Resolution
750 x 1334
DP
375 x 667
Iphone 6s
Resolution
1080 x 1920
DP
414 x 736
Galaxy S6
Resolution
1440 x 2560
DP
360 x 640
Note 4
Resolution
1440 x 2560
DP
400 x 853
Nexus 6
Resolution
1440 x 2560
DP
411 x 731
iPad Mini
Resolution
768 x 1024
DP
768 x 1024
iPad
Resolution
1536 x 2048
DP
728 x 1024
Typical Laptop
Resolution
1366 x 768
DP
1366 x 768
Typical Desktop
Resolution
1920 x 1080
DP
1920 x 1080
12 Column Responsive Fluid Grid
W3.CSS also supports an advanced 12 column responsive fluid grid.
Resize the page to see the effect!
1
2
3
4
5
6
7
8
9
10
11
12
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.
1
2
3
4
5
6
7
8
9
10
11
12
You will learn a lot more about the fluid grid in a later chapter.
❮ Previous Next ❯
No comments:
Post a Comment