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.

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>

Try It Yourself »

Layout Cells

The w3-cell class redefines block elements to display horizontally (like table cells):

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>

Try It Yourself »

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.

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>

Try It Yourself »

If you change the width of the cell container, it will reduce the total width of the contained cells:

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>

Try It Yourself »

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>

Try It Yourself »

Layout Cells Adjust to Equal Height

Side-by-side w3-cell elements will also automatically self-adjust to equal height:

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>

Try It Yourself »

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.

On small screens:

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>

Try It Yourself »

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.

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>

Try It Yourself »

The w3-cell-row class stretches the elements to fit the page width:

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>

Try It Yourself »

❮ Previous Next ❯