UPCISS
W3.CSS
Framework
Video Tutorial
W3.CSS Full Playlist Available on
YouTube Channel UPCISS
Free Online Computer Classes on
YouTube Channel UPCISS
www.youtube.com/upciss
Copyright © 2021 UPCISS
Website: www.upcissyoutube.com YouTube Channel: UPCISS
Index
W3.CSS Introduction----------------------------- 2
W3.CSS Colors ------------------------------------- 2
W3.CSS Containers ------------------------------- 6
W3.CSS Panels ------------------------------------- 7
W3.CSS Borders ----------------------------------- 9
W3.CSS Fonts-------------------------------------- 14
W3.CSS Text --------------------------------------- 14
W3.CSS Tables ------------------------------------ 16
W3.CSS Lists --------------------------------------- 21
W3.CSS Images ----------------------------------- 25
W3.CSS Responsive Fluid Grid -------------- 31
1
Website: www.upcissyoutube.com YouTube Channel: UPCISS
W3.CSS Introduction
A Quality Alternative to Bootstrap
W3.CSS is Smaller, Faster and Easier to Use.
W3.CSS is a modern, responsive, mobile first CSS framework.
W3.CSS provides equality for all browsers: Chrome. Firefox. Edge. IE. Safari.
Opera.
W3.CSS provides equality for all devices: Desktop. Laptop. Tablet. Mobile.
W3.CSS is standard CSS only (No jQuery or JavaScript library).
W3.CSS is Free
W3.CSS is free to use. No license is necessary.
How To
To use W3.CSS in your web site, just add a link to "w3.css" from your web pages:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
Or download w3.css from w3css_downloads and add a link to w3.css:
<link rel="stylesheet" href="w3.css">
W3.CSS Colors
Coloring HTML Elements
The w3-color and w3-text-color classes can be used to color any HTML element:
2
Website: www.upcissyoutube.com YouTube Channel: UPCISS
Background Colors
The w3-color classes set the background color for any HTML element:
Example
<div class="w3-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
<div class="w3-yellow">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
<div class="w3-gray">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
Text Colors
The w3-text-color classes set the text color of any HTML element:
Example
<div class="w3-text-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
Hover Colors
The w3-hover-color classes define the background hover color for any HTML
element:
Example
<div class="w3-container w3-orange w3-hover-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom, with a
metropolitan area of over 9 million inhabitants.</p>
</div>
3
Website: www.upcissyoutube.com YouTube Channel: UPCISS
The w3-hover-text-color classes define the text hover color for any HTML
element:
Example
<div class="w3-container w3-orange w3-hover-text-white">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom, with a
metropolitan area of over 9 million inhabitants.</p>
</div>
Color libraries
In addition to standard W3.CSS colors, W3.CSS can also use colors from a lot of
different color libraries:
Windows Colors:
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-win8.css">
Example
<div class="w3-win8-lime">
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
4
Website: www.upcissyoutube.com YouTube Channel: UPCISS
Fashion Colors:
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-2021.css">
Example
<div class="w3-2021-marigold">Marigold</div>
<div class="w3-2021-cerulean">Cerulean</div>
<div class="w3-2021-rust">Rust</div>
Highway Colors:
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-highway.css">
<div class="w3-highway-schoolbus">Schoolbus</div>
<div class="w3-highway-green">Falcon Ridge Parkway</div>
<div class="w3-highway-red">STOP</div>
5
Website: www.upcissyoutube.com YouTube Channel: UPCISS
W3.CSS Containers
The Container Class
The w3-container class has a default 16px left and right padding, and no top or
bottom padding to any HTML element.
The w3-container class is the perfect class to use for all HTML container elements
like:
<div>, <article>, <section>, <header>, <footer>, <form>, and more.
Containers Provides Equality
The w3-container provides equality for all HTML container elements:
Common margins
Common paddings
Common alignments
Common fonts
Common colors
Example (To add a color, just add a w3-color class)
<div class="w3-container w3-red ">
<p>The w3-container class is an important w3.CSS class.</p>
</div>
6
Website: www.upcissyoutube.com YouTube Channel: UPCISS
Headers and Footers
The w3-container class can be used to style headers:
Example
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>
Example
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
Articles and Sections
The w3-container class can be used to style <article> and <section> elements:
<article class="w3-container w3-red">
<h2>Paris</h2>
<p>The Paris area is one of the largest population centers in Europe,
with more than 2 million inhabitants.</p>
</article>
<section class="w3-container w3-blue">
<h2>Tokyo</h2>
<p>Tokyo is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</section>
W3.CSS Panels
The Panel Class
The w3-panel class adds a 16px top and bottom margin and a 16px left and right
padding to any HTML element.
Example
<div class="w3-panel w3-red">
<p>I am a panel.</p>
</div>
7
Website: www.upcissyoutube.com YouTube Channel: UPCISS
8
Website: www.upcissyoutube.com YouTube Channel: UPCISS
W3.CSS Borders
9
Website: www.upcissyoutube.com YouTube Channel: UPCISS
W3.CSS Border Classes
W3.CSS provides the following border classes:
Class Defines
w3-border Adds borders (top, right, bottom, left) to an element
w3-border-top Adds a top border to an element
w3-border-right Adds a right border to an element
w3-border-bottom Adds a bottom border to an element
w3-border-left Adds a left border to an element
w3-border-0 Removes all borders
w3-border-color Displays the border in a specified color (like red, blue,
etc)
10
Website: www.upcissyoutube.com YouTube Channel: UPCISS
w3-hover-border- Adds a hoverable border color
color
w3-bottombar Adds a thick bottom border to an element
w3-leftbar Adds a thick left border to an element
w3-rightbar Adds a thick right border to an element
w3-topbar Adds a thick top border to an element
Adding Borders
Example
<div class="w3-panel w3-border">
<p>I have borders.</p>
</div>
<div class="w3-panel w3-border-left">
<p>I have only a left border.</p>
</div>
<div class="w3-panel w3-border-top w3-border-bottom">
<p>I have top and bottom borders.</p>
</div>
Border Colors
The w3-border-color classes are used to add colors to borders:
Example
<div class="w3-panel w3-border w3-border-red">
<p>I have red borders.</p>
</div>
<div class="w3-panel w3-border-left w3-border-blue">
<p>I have a blue left border.</p>
</div>
<div class="w3-panel w3-border-top w3-border-bottom w3-border-green">
<p>I have a green top and bottom border.</p>
</div>
11
Website: www.upcissyoutube.com YouTube Channel: UPCISS
Rounded Borders
To add rounded borders, add one of the w3-round-size classes:
Example
<div class="w3-panel w3-border">
<p>My borders are normal.</p>
</div>
<div class="w3-panel w3-border w3-round-small">
<p>My borders are rounded (small).</p>
</div>
<div class="w3-panel w3-border w3-round">
<p>My borders are rounded.</p>
</div>
<div class="w3-panel w3-border w3-round-large">
<p>I have large rounded borders.</p>
</div>
<div class="w3-panel w3-border w3-round-xlarge">
<p>I have xlarge rounded borders.</p>
</div>
<div class="w3-panel w3-border w3-round-xxlarge">
<p>I have xxlarge rounded borders.</p>
</div>
12
Website: www.upcissyoutube.com YouTube Channel: UPCISS
Thick Borders
The w3-topbar, w3-bottombar, w3-leftbar, and w3-rightbar classes are used
to add thick borders to an element:
Example
<div class="w3-panel w3-leftbar">
<p>I have a thick left border.</p>
</div>
<div class="w3-panel w3-leftbar w3-border-blue">
<p>I have a thick blue left border.</p>
</div>
<div class="w3-panel w3-leftbar w3-border-blue w3-pale-blue">
<p>I have a thick blue left border and a pale-blue background color.</p>
</div>
<div class="w3-panel w3-topbar w3-bottombar w3-border-red w3-pale-red">
<p>I have a thick red top and bottom border and a pale-red background
color.</p>
</div>
Hoverable Borders
The w3-hover-border-color classes change the color of the border on mouse-
over:
Example
<div class="w3-panel w3-border w3-hover-border-red">
<p>Border that turns red on hover</p>
</div>
<div class="w3-panel w3-border w3-border-red w3-hover-border-green">
<p>Red border that turns green on hover</p>
</div>
Example
<div class="w3-panel w3-leftbar w3-border-white w3-hover-border-green">
<p>Thick (invisible) left border that turns green on hover.</p>
</div>
<div class="w3-panel w3-bottombar w3-border-white w3-hover-border-green">
<p>Thick (invisible) bottom border that turns green on hover.</p>
</div>
13
Website: www.upcissyoutube.com YouTube Channel: UPCISS
W3.CSS Fonts
Using Font Classes
With W3.CSS you can use 4 different built-in font classes:
w3-serif
w3-sans-serif
w3-monospace
w3-cursive
Example
<p class="w3-sans-serif">
<div class="w3-monospace">
<div class="w3-cursive">
W3.CSS Text
Text Alignment
The w3-left-align and the w3-right-align classes are used to align text.
Example
<div class="w3-container w3-border w3-large">
<div class="w3-left-align"><p>Left aligned text.</p></div>
<div class="w3-right-align"><p>Right aligned text.</p></div>
</div>
Centering Elements
The w3-center class is used to center-align elements:
Example
<div class="w3-container w3-center">
<h2>Centered Content</h2>
<img src="img_car.jpg" alt="car" style="width:80%;max-width:320px">
<p>Some centered text.</p>
</div>
14
Website: www.upcissyoutube.com YouTube Channel: UPCISS
Wide Text
The w3-wide class specifies a wider text:
This text is wider.
Example
<p class="w3-wide">The w3-wide class specifies a wider text.</p>
Text Opacity
The w3-opacity class is designed to work with all colors:
Example
<div class="w3-panel w3-pink">
<h2 class="w3-opacity">Text Opacity</h2>
</div>
Text Shadow
The CSS3 text-shadow property can be used to add shadow or blur effects to text:
Example
<h2 class="w3-blue" style="text-shadow:1px 1px 0 #444">Text Shadow</h2>
Special Effects
Example
<div class="w3-panel w3-pink">
<h1 class="w3-opacity">
<b>Text Opacity + Bold</b></h1>
</div>
<div class="w3-panel w3-amber">
<h1 class="w3-text-yellow" style="text-shadow:1px 1px 0 #444">
<b>Yellow Text + Shadow + Bold</b></h1>
</div>
<div class="w3-panel w3-blue">
<h1 class="w3-text-orange" style="text-shadow:1px 1px 0 #444">
<b>Orange Text + Shadow + Bold</b></h1>
</div>
15
Website: www.upcissyoutube.com YouTube Channel: UPCISS
W3.CSS Tables
W3.CSS Table Classes
W3.CSS provides the following classes for tables:
Class Defines
w3-table Container for an HTML table
w3-striped Striped table
w3-border Bordered table
w3-bordered Bordered lines
w3-centered Centered table content
w3-hoverable Hoverable table
w3-table-all All properties set
16
Website: www.upcissyoutube.com YouTube Channel: UPCISS
Basic Table
The w3-table class is used to display a basic table:
Example
<table class="w3-table">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
Striped Table
The w3-striped class is used to add zebra-stripes to a table:
Example
<table class="w3-table w3-striped">
Bordered Table
The w3-bordered class adds a bottom border to each table row:
Example
<table class="w3-table w3-bordered">
Striped Bordered Table
Combine the w3-striped class and the w3-bordered class to create a striped
bordered table:
Example
<table class="w3-table w3-striped w3-bordered">
17
Website: www.upcissyoutube.com YouTube Channel: UPCISS
Border around a Table
The w3-border class is used to display a border around a table:
Example
<table class="w3-table w3-striped w3-border">
Tip: The w3-border class is not only for tables. It can be used on any HTML element!
Displaying it All
The w3-table-all class combines all of the classes above:
Example
<table class="w3-table-all">
Centering all Content
The w3-centered class centers the content of the table:
Example
<table class="w3-table-all w3-centered">
Centering one Column
The w3-center class centers the content of a column:
Example
<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-center">Points</th>
</tr>
Right Align one Column
The w3-right-align class right aligns the content of a column:
18
Website: www.upcissyoutube.com YouTube Channel: UPCISS
Example
<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-right-align">Points</th>
</tr>
Hoverable Table
The w3-hoverable class adds a grey background color on mouse-over:
Example
<table class="w3-table-all w3-hoverable">
Hover Colors
If you want a specific hover color, add any of the w3-hover-color classes to each
<tr> element:
Example
<tr class="w3-hover-green">
Responsive Table
The w3-responsive class creates a responsive table. The table will then scroll
horizontally on small screens. When viewing on large screens, there is no
difference.
Example
<div class="w3-responsive">
<table class="w3-table-all">
... table content ...
</table>
</div>
Table as a Card
Use a w3-card class to display a table as a card:
19
Website: www.upcissyoutube.com YouTube Channel: UPCISS
Example
<table class="w3-table-all w3-card-4">
Tiny Table
Use the w3-tiny class to display a tiny table:
Example
<table class="w3-table-all w3-tiny">
Small Table
Use the w3-small class to display a small table:
Example
<table class="w3-table-all w3-small">
Large Table
Use the w3-large class to display a large table:
Example
<table class="w3-table-all w3-large">
XLarge Table
Use the w3-xlarge class to display an xlarge table:
Example
<table class="w3-table-all w3-xlarge">
XXLarge Table
Use the w3-xxlarge class to display an xxlarge table:
Example
<table class="w3-table-all w3-xxlarge">
20
Website: www.upcissyoutube.com YouTube Channel: UPCISS
XXXLarge Table
Use the w3-xxxlarge class to display an xxxlarge table:
Example
<table class="w3-table-all w3-xxxlarge">
Jumbo Table
Use the w3-jumbo class to display a jumbo large table:
Example
<table class="w3-table-all w3-jumbo">
W3.CSS Lists
Basic List
The w3-ul class is used to display a basic list:
Example
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Bordered List
The w3-border class adds a border around the list:
Example
<ul class="w3-ul w3-border">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
21
Website: www.upcissyoutube.com YouTube Channel: UPCISS
List as a Card
The w3-card-number classes can be used to show a list as a card:
Example
<ul class="w3-ul w3-card-4" style="width:50%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Centered List
The w3-center class can be used to center the list items in a list:
Example
<ul class="w3-ul w3-center">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Colored List
The w3-color classes can be used to add a color to the list:
Example
<ul class="w3-ul w3-red">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Colored List Item
The w3-color classes can be used to add a color to the list item:
Example
<ul class="w3-ul">
<li class="w3-blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
22
Website: www.upcissyoutube.com YouTube Channel: UPCISS
Hoverable List
The w3-hoverable class adds a grey background color to each list item on mouse-
over:
Example
<ul class="w3-ul w3-hoverable">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
If you want a specific hover color, add any of the w3-hover-color classes to each
<li> element:
Example
<ul class="w3-ul">
<li class="w3-hover-red">Jill</li>
<li class="w3-hover-blue">Eve</li>
<li class="w3-hover-green">Adam</li>
</ul>
Closable List Item
Click on the "x" to close/hide a list item:
Example
<li class="w3-display-container">Jill
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-right">×</span>
</li>
Tip: The HTML × entity is the preferred icon for close buttons (rather than the letter "X").
List with Padding
The w3-padding classes can be used to add padding to list items:
Example
<ul class="w3-ul">
<li class="w3-padding-small">Jill</li>
<li class="w3-padding-small">Eve</li>
<li class="w3-padding-small">Adam</li>
</ul>
23
Website: www.upcissyoutube.com YouTube Channel: UPCISS
Avatar List
Example
<li class="w3-bar">
<span onclick="this.parentElement.style.display='none'"
class="w3-bar-item w3-button w3-xlarge w3-right">×</span>
<img src="img_avatar2.png" class="w3-bar-item w3-
circle" style="width:85px">
<div class="w3-bar-item">
<span class="w3-large">Mike</span><br>
<span>Web Designer</span>
</div>
</li>
List Width
Lists have a 100% width by default. Use the width property to change this.
Example
<ul class="w3-ul" style="width:30%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Tiny List
Use the w3-tiny class to display a tiny list:
Example
<ul class="w3-ul w3-tiny">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Small List
Use the w3-small class to display a small list:
24
Website: www.upcissyoutube.com YouTube Channel: UPCISS
Large List
Use the w3-large class to display a large list:
XLarge List
Use the w3-xlarge class to display an extra-large list:
XXLarge List
Use the w3-xxlarge class to display an XXLarge list:
XXXLarge List
Use the w3-xxxlarge class to display an XXXLarge list:
Jumbo List
Use the w3-jumbo class to display an enormous "jumbo" list:
W3.CSS Images
The w3-round class adds rounded corners to an image:
Example
<img src="img_snowtops.jpg" class="w3-round-small" alt="Norway">
<img src="img_snowtops.jpg" class="w3-round" alt="Norway">
<img src="img_snowtops.jpg" class="w3-round-large" alt="Norway">
<img src="img_snowtops.jpg" class="w3-round-xlarge" alt="Norway">
<img src="img_snowtops.jpg" class="w3-round-xxlarge" alt="Norway">
25
Website: www.upcissyoutube.com YouTube Channel: UPCISS
The w3-circle class shapes an image to a circle:
Example
<img src="snowtops.jpg" class="w3-circle" alt="Alps">
Bordered Image
The w3-border class adds borders around the image:
Example
<img src="snowtops.jpg" class="w3-border w3-padding" alt="Alps">
Image as a Card
Wrap any of the w3-card-* classes around the <img> element to display it as a
card (add shadows):
Example
<div class="w3-card-4">
<img src="img_avatar.png" alt="Person">
</div>
Image Text
Position the text in an image with the w3-display-classes:
26
Website: www.upcissyoutube.com YouTube Channel: UPCISS
Example
<div class="w3-display-container">
<img src="img_lights.jpg" alt="Lights">
<div class="w3-display-topleft w3-container">Top Left</div>
<div class="w3-display-topright w3-container">Top Right</div>
<div class="w3-display-bottomleft w3-container">Bottom Left</div>
<div class="w3-display-bottomright w3-container">Bottom Right</div>
<div class="w3-display-left w3-container">Left</div>
<div class="w3-display-right w3-container">Right</div>
<div class="w3-display-middle w3-large">Middle</div>
<div class="w3-display-topmiddle w3-container">Top Middle</div>
<div class="w3-display-bottommiddle w3-container">Bottom Middle</div>
</div>
Responsive Images
An image can be set to automatically resize itself to fit the size of its container.
If you want the image to scale down if it has to, but never scale up to be larger
than its original size, use the w3-image class.
Example
<img src="img_lights.jpg" alt="Lights" class="w3-image">
If you want to restrict a responsive image to a maximum size, use the max-width
property:
Example
<img src="img_lights.jpg" alt="Lights" style="width:100%;max-width:400px">
Opacity
The w3-opacity classes make images transparent:
Example
<img src="img_forest.jpg" alt="Forest" class="w3-opacity-min">
<img src="img_forest.jpg" alt="Forest" class="w3-opacity">
<img src="img_forest.jpg" alt="Forest" class="w3-opacity-max">
Grayscale
The w3-grayscale classes add a grayscale effect to an image:
27
Website: www.upcissyoutube.com YouTube Channel: UPCISS
Example
<img src="image.jpg" alt="Table" class="w3-grayscale-min">
<img src="image.jpg" alt="Table" class="w3-grayscale">
<img src="image.jpg" alt="Table" class="w3-grayscale-max">
Sepia
The w3-sepia classes add a sepia effect to an image:
Example
<img src="image.jpg" alt="Table" class="w3-sepia-min">
<img src="image.jpg" alt="Table" class="w3-sepia">
<img src="image.jpg" alt="Table" class="w3-sepia-max">
Hover Effects
You can also add special effects on hover/mouse-over.
Example
<img src="image.jpg" alt="Einstein" class="w3-hover-opacity">
<img src="image.jpg" alt="Einstein" class="w3-hover-grayscale">
<img src="image.jpg" alt="Einstein" class="w3-hover-sepia">
Opacity Off
The w3-hover-opacity class adds transparency to the image on mouse-over, and
the w3-hover-opacity-off class removes transparency on mouse-over.
Example
<img src="snowtops.jpg" class="w3-hover-opacity" alt="Alps">
<img src="snowtops.jpg" class="w3-opacity w3-hover-opacity-off" alt="Alps">
Constructing a Photo Album
In this example we use the W3.CSS Responsive Grid system to create a photo
album that looks good on all devices. You will learn more about this later.
28
Website: www.upcissyoutube.com YouTube Channel: UPCISS
29
Website: www.upcissyoutube.com YouTube Channel: UPCISS
30
Website: www.upcissyoutube.com YouTube Channel: UPCISS
W3.CSS Responsive Fluid Grid
Responsive Grid
W3.CSS supports a 12 column responsive fluid grid.
Example
<div class="w3-row">
<div class="w3-col m4 l3">
<p>12 columns on a small screen, 4 on a medium screen, and 3 on a large
screen.</p>
</div>
<div class="w3-col m8 l9">
<p>12 columns on a small screen, 8 on a medium screen, and 9 on a large
screen.</p>
</div>
</div>
Responsive Rows
W3.CSS's grid system is responsive. The columns will re-arrange automatically
depending on the screen size: On a big screen it might look better with the content
organized in three columns, but on a small screen it might be better if the content
were stacked on top of each other.
Class Description
w3-row Container for responsive classes, with no padding
w3-row- Container for responsive classes, with 8px left and right padding
padding
w3-col Defines one column in a 12-column responsive grid
w3-col has the following sub classes:
Columns for small screens (typical smart phones):
Class Description
31
Website: www.upcissyoutube.com YouTube Channel: UPCISS
s1 Defines 1 of 12 columns (width:08.33%) for small screens
s2 Defines 2 of 12 columns (width:16.66%) for small screens
s3 Defines 3 of 12 columns (width:25.00%) for small screens
s4 Defines 4 of 12 columns (width:33.33%) for small screens
s5-s11
s12 Defines 12 of 12 columns (width:100%). Default for small
screens
Columns for medium screens (typical tablets):
Class Description
m1 Defines 1 of 12 columns (width:08.33%) for medium screens
m2 Defines 2 of 12 columns (width:16.66%) for medium screens
m3 Defines 3 of 12 columns (width:25.00%) for medium screens
m4 Defines 4 of 12 columns (width:33.33%) for medium screens
m5-m11
m12 Defines 12 of 12 columns (width:100%). Default for medium
screens
Columns for large screens (typical laptops and desktops):
Class Description
l1 Defines 1 of 12 columns (width:08.33%) for large screens
l2 Defines 2 of 12 columns (width:16.66%) for large screens
l3 Defines 3 of 12 columns (width:25.00%) for large screens
32
Website: www.upcissyoutube.com YouTube Channel: UPCISS
l4 Defines 4 of 12 columns (width:33.33%) for large screens
l5-l11
l12 Defines 12 of 12 columns (width:100%). Default for large
screens)
The classes above can be combined to create more dynamic and flexible layouts.
Each class scales up, so if you wish to set the same width for small, medium and
large screens, you only need to specify the small class. And if you want the same
width on medium and large screens, you only need to specify the medium class.
However, if you only use medium and/or large classes, the width will always
transform to 100% on small screens.
Note: The number of columns should always add up to 12 for each row (6+6,
3+3+6, 9+3, etc)!
Difference between w3-row and w3-row-
padding
The w3-row class defines a padded-less container, while the w3-row-padding class
adds a 8px left and right padding to each column:
Example
<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>
Using w3-rest
The w3-rest class is a powerful and flexible class that will use what's left of the
grid column.
33
Website: www.upcissyoutube.com YouTube Channel: UPCISS
The element using class="w3-rest" must always be the last element in the source code.
34
Website: www.upcissyoutube.com YouTube Channel: UPCISS
Using Percent
Use the CSS width property to determine a specific width of the columns.
Example
<div class="w3-row">
<div class="w3-col w3-container w3-
green" style="width:20%"><p>20%</p></div>
<div class="w3-col w3-container w3-blue" style="width:60%"><p>60%</p></div>
<div class="w3-col w3-container w3-red" style="width:20%"><p>20%</p></div>
</div>
35
