Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

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>

Try It Yourself »



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>

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.

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.

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.

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>

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.

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>

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.

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>

Try It Yourself »

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>

Try It Yourself »


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.