W3.CSS Layout

Toggle navigation
TUTORIAL HOME
W3.CSS Layout
❮ Previous Next ❯
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
W3.CSS version 2.90 / 2.91 introduced the following classes for "column-like" layout:

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.
The layout classes replace deprecated layout classes.

The new layout classer are more versatile and easier to use.

The deprecated layout classes are listed at the bottom of this page.

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 ads 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-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>
»

Deprecated W3.CSS Table Layout Classes
w3-layout-container Use w3-cell-row instead.
w3-layout-row
w3-layout-cell Use w3-cell instead.
w3-layout-top Use w3-cell-top instead.
w3-layout-middle Use w3-cell-middle instead.
w3-layout-bottom Use w3-cell-bottom instead.
w3-layout-col Use w3-mobile instead.
Deprecated classes will be removed from W3.CSS in version 4.0.


❮ Previous Next ❯