W3.CSS Layout
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
W3.CSS Layout Classes
| Class | Description |
|---|---|
| w3-cell-row | Container for cells (columns). |
| w3-cell | Layout cell (column). |
| w3-cell-top | Aligns content at the top of a cell (column). |
| w3-cell-middle | Aligns content at the vertical middle of a cell (column). |
| w3-cell-bottom | Aligns content at the bottom of a cell (column). |
| w3-mobile | Adds mobile-first responsiveness to a cell (column). Displays elements as block elements on mobile devices. |
HTML Block Elements
Originally, HTML block elements (like <div> elements) display as vertical blocks:
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Example
<div class="w3-container w3-red">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green">
<p>Hello W3.CSS Layout.</p>
</div>
Layout Cells
The w3-cell class redefines block elements to display horizontally (like table cells):
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Example
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
Layout Container
The w3-cell-row is a container for cells (columns).
The width of the w3-cell-row container defines the total width of all the contained cells.
The default width is 100%:
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Example
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
If you change the width of the cell container, it will reduce the total width of the contained cells:
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Example
<div class="w3-cell-row" style="width:75%">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Layout Cells are Self Adjusting
The w3-cell class has a very nice built-in self adjusting standard. Side-by-side elements will automatically adjust to the necessary width:
Hello W3.CSS Layout.
Hello W3.CSS Layout. Hello W3.CSS Layout.
Example
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout. Hello W3.CSS Layout.</p>
</div>
Layout Cells Adjust to Equal Height
Side-by-side w3-cell elements will also automatically self-adjust to equal height:
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Example
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
Responsive Layout
The w3-mobile class adds mobile first responsiveness to any HTML element.
Used together with w3-cell it will display the layout columns vertically on small screens/mobile phones and horizontally on medium/large screens.
On medium and large screens:
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
On small screens:
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Example
<div class="w3-container w3-red w3-cell w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
Easy Alignment
The w3-cell class makes it very easy to align text.
There are 3 different alignment classes:
- w3-cell-top (default)
- w3-cell-middle
- w3-cell-bottom
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Example
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
The w3-cell-row class stretches the elements to fit the page width:
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Example
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
