W3.CSS Mobile Layouts
Mobile-Friendly Layouts
W3.CSS makes it easy to create layouts that work on phones, tablets, and computers.
On large screens, content can be displayed in several columns.
On small screens, columns can be stacked vertically to make the content easier to read.
W3.CSS provides responsive classes for traditional columns, Flexbox, and Grid.
The w3-mobile Class
The w3-mobile class makes an element use the full available width on small screens.
This is useful for buttons, input fields, and other elements that should be easier to use on mobile devices.
Example
<button class="w3-button w3-blue w3-mobile">Button 1</button>
<button class="w3-button w3-green w3-mobile">Button 2</button>
<button class="w3-button w3-red w3-mobile">Button 3</button>
Try it Yourself »
The w3-mobile class applies its mobile layout rules when the screen width is 600 pixels or less.
Resize the browser window to see the buttons change from their normal width to full width.
Responsive Rows
The w3-row class is used with column classes such as w3-half and w3-third.
These column classes automatically stack on small screens.
Column 1
First column.
Column 2
Second column.
Example
<div class="w3-row">
<div class="w3-half w3-container w3-blue">
<h3>Column 1</h3>
<p>First column.</p>
</div>
<div class="w3-half w3-container w3-green">
<h3>Column 2</h3>
<p>Second column.</p>
</div>
</div>
Try it Yourself »
On larger screens, the columns share the available width.
On small screens, each column takes the full width and appears below the previous column.
You do not need to add w3-mobile to w3-half or w3-third.
These column classes already include responsive behavior.
Mobile Flexbox Layouts
The w3-flex-mobile class makes flex items stack vertically on small screens.
Use it together with w3-flex to create a responsive flex container.
Item 1
First flex item.
Item 2
Second flex item.
Item 3
Third flex item.
Example
<div class="w3-flex w3-flex-mobile w3-gap">
<div class="w3-container w3-blue">
<p>Item 1</p>
</div>
<div class="w3-container w3-green">
<p>Item 2</p>
</div>
<div class="w3-container w3-red">
<p>Item 3</p>
</div>
</div>
Try it Yourself »
On larger screens, the flex items are arranged in a row.
On small screens, the items are arranged in a column.
The w3-gap class adds space between the items in both layouts.
The w3-flex-mobile class changes the direction of the flex items.
It does not create a flex container by itself.
Use w3-flex together with w3-flex-mobile.
Mobile Grid Layouts
The w3-grid-mobile class changes a grid layout to one column on small screens.
It can be combined with w3-grid-2, w3-grid-3, or w3-grid-4.
Column 1
First grid item.
Column 2
Second grid item.
Column 3
Third grid item.
Example
<div class="w3-grid-3 w3-grid-mobile w3-gap">
<div class="w3-container w3-blue">
<p>Column 1</p>
</div>
<div class="w3-container w3-green">
<p>Column 2</p>
</div>
<div class="w3-container w3-red">
<p>Column 3</p>
</div>
</div>
Try it Yourself »
On larger screens, the grid displays three columns.
On small screens, the grid displays one column.
The w3-grid-mobile class changes the number of grid columns.
It does not create a grid container by itself.
Use it together with a grid class such as w3-grid-3.
Automatic Responsive Grids
W3.CSS also provides grid classes that automatically adjust the number of columns.
The w3-grid-auto class creates as many columns as can fit in the available space.
The columns automatically wrap when the container becomes narrower.
HTML
Learn HTML.
CSS
Learn CSS.
JavaScript
Learn JavaScript.
Example
<div class="w3-grid-auto w3-gap">
<div class="w3-container w3-blue">
<h3>HTML</h3>
</div>
<div class="w3-container w3-green">
<h3>CSS</h3>
</div>
<div class="w3-container w3-red">
<h3>JavaScript</h3>
</div>
</div>
Try it Yourself »
Unlike w3-grid-3, the w3-grid-auto class does not use a fixed number of columns.
You do not need to add w3-grid-mobile because the grid already adjusts automatically.
What Is Mobile-First?
Mobile-first means designing a layout for small screens first.
Additional columns or layout changes are then added for larger screens.
This approach helps keep mobile layouts simple.
Mobile-First with W3.CSS
The w3-grid-auto class is a good example of a responsive layout that works well with a mobile-first approach.
It uses one column when there is not enough room for more columns.
As more space becomes available, additional columns appear automatically.
Example
<div class="w3-grid-auto w3-gap">
<div class="w3-container w3-blue">One</div>
<div class="w3-container w3-green">Two</div>
<div class="w3-container w3-red">Three</div>
</div>
Try it Yourself »
The w3-flex-mobile and w3-grid-mobile classes use a different approach.
They start with a row or multi-column layout and change it for smaller screens.
Both approaches can create mobile-friendly pages.
Choosing a Mobile Layout
W3.CSS provides several ways to create responsive layouts.
The best choice depends on the layout you want to build.
| Class | Best For |
|---|---|
w3-row |
Traditional responsive column layouts |
w3-mobile |
Make any element full width on small screens |
w3-flex-mobile |
Changes all flex items to full with on small screens |
w3-grid-mobile |
Changes all grid items to full width on small screens |
w3-grid-auto |
Adjust the number of grid columns to available space |
Use w3-mobile when individual elements should become full width.
Use w3-flex-mobile when flex items should stack vertically.
Use w3-grid-mobile when a grid should become one column.
Use w3-grid-auto when you want the number of columns to adjust automatically.
