W3.CSS Built-In Responsiveness
Responsive Classes
These are the responsive classes:
| 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-rest | Defines the rest of a row |
| w3-col | Defines a column (more in a later chapter) |
Responsive Rows
Responsive classes must be placed inside a w3-row to be fully responsive.
| Class | Description |
|---|---|
| w3-row | Defines a padding-less container for responsive classes. |
| w3-row-padding | Defines a padded container for responsive classes. |
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-container w3-half">
<h2>w3-half</h2>
</div>
<div class="w3-container w3-half">
<h2>w3-half</h2>
</div>
</div>
Try It Yourself »
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 using w3-third
<div class="w3-row">
<div class="w3-container
w3-third">
<h2>w3-third</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div>
Try It Yourself »
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 using w3-third
<div class="w3-row">
<div class="w3-container
w3-third">
<h2>w3-twothird</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div>
Try It Yourself »
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 using w3-quarter
<div class="w3-row">
<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 class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div>
Try It Yourself »
Combinations
w3-quarter
w3-half
w3-quarter
w3-quarter
w3-quarter
w3-half
w3-half
w3-quarter
w3-quarter
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>
Try It Yourself »
Columns Using Rest
I am 150px
I am the rest
Example using w3-rest
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div>
Try It Yourself »
Columns Using Percent
20%
60%
20%
Example using percent
<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>
Try It Yourself »
The w3-content Class
The w3-content class defines a container for fixed size centered content:
Example
<body class="w3-content" style="max-width:500px">
<div
class="w3-container w3-card-2 w3-indigo">
<h1>Movies 2014</h1>
</div>
<ul class="w3-ul">
<li>
<h3>Frozen</h3>
<p>The social media response
to the animations was ridiculous.</p>
</li>
<li>
<h3>The Fault in Our Stars</h3>
<p>Touching, gripping
and genuinely well made.</p>
</li>
<li>
<h3>The Avengers</h3>
<p>The Avengers is a hugely
bankable franchise for Marvel and Disney.</p>
</li>
</ul>
<div class="w3-container w3-indigo w3-xlarge">
<h5>Movies
2014</h5>
</div>
</body>
Try It Yourself »
12 Column responsive fluid grid
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 more about the fluid grid in a later chapter.
