THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

W3.CSS Built-In Responsiveness


Responsive Classes

These are the responsive classes:

Class Description
w3-half Occupies 1/2 of the window (on medium and large screens)
w3-third Occupies 1/3 of the window (on medium and large screens)
w3-twothird Occupies 2/3 of the window (on medium and large screens)
w3-quarter Occupies 1/4 of the window (on medium and large screens)
w3-rest Defines the rest of a row
w3-col Defines a column (more in a later chapter)

Responsive Rows

Responsive classes must be placed inside a w3-row to be fully responsive.

Class Description
w3-row Defines a padding-less container for responsive classes.
w3-row-padding Defines a padded container for responsive classes.

The w3-half Class

The width of the w3-half class is 1/2 of the parent element (style="width:50%").

On screens smaller than 601 pixels, it resizes to 100%.

w3-half

w3-half

Example

<div class="w3-row">
  <div class="w3-container w3-half">
    <h2>w3-half</h2>
  </div>
  <div class="w3-container w3-half">
    <h2>w3-half</h2>
  </div>
</div>
Try It Yourself »

The w3-third Class

The width of the w3-third class is 1/3 of the parent element (style="width:33.33%").

On screens smaller than 601 pixels, it resizes to 100%.

w3-third

w3-third

w3-third

Example using w3-third

<div class="w3-row">
  <div class="w3-container w3-third">
    <h2>w3-third</h2>
  </div>
  <div class="w3-container w3-third">
    <h2>w3-third</h2>
  </div>
  <div class="w3-container w3-third">
    <h2>w3-third</h2>
  </div>
</div>
Try It Yourself »

The w3-twothird Class

The width of the w3-twothird class is 2/3 of the parent element (style="width:66.66%").

On screens smaller than 601 pixels, it resizes to 100%.

w3-twothird

w3-third

Example using w3-third

<div class="w3-row">
  <div class="w3-container w3-third">
    <h2>w3-twothird</h2>
  </div>
  <div class="w3-container w3-third">
    <h2>w3-third</h2>
  </div>
</div>
Try It Yourself »

The w3-quarter Class

The width of the w3-quarter class is 1/4 of the parent element (style="width:25%").

On screens smaller than 601 pixels, it resizes to 100%.

w3-quarter

w3-quarter

w3-quarter

w3-quarter

Example using w3-quarter

<div class="w3-row">
  <div class="w3-container w3-quarter">
    <h2>w3-quarter</h2>
  </div>
  <div class="w3-container w3-quarter">
    <h2>w3-quarter</h2>
  </div>
  <div class="w3-container w3-quarter">
    <h2>w3-quarter</h2>
  </div>
  <div class="w3-container w3-quarter">
    <h2>w3-quarter</h2>
  </div>
</div>
Try It Yourself »

Combinations

w3-quarter

w3-half

w3-quarter


w3-quarter

w3-quarter

w3-half


w3-half

w3-quarter

w3-quarter


Example: w3-half Inside w3-half

<div class="w3-row">
  <div class="w3-half w3-container">
    <h2>w3-half</h2>
    <div class="w3-row">
      <div class="w3-half w3-container w3-red">
        <h2>w3-half</h2>
        <p>This is a paragraph.</p>
      </div>
      <div class="w3-half w3-container">
        <h2>w3-half</h2>
        <p>This is a paragraph.</p>
      </div>
    </div>
  </div>
  <div class="w3-half w3-container">
    <h2>w3-half</h2>
    <div class="w3-row">
      <div class="w3-half w3-container w3-red">
        <h2>w3-half</h2>
        <p>This is a paragraph.</p>
      </div>
      <div class="w3-half w3-container">
        <h2>w3-half</h2>
        <p>This is a paragraph.</p>
      </div>
    </div>
  </div>
</div>
Try It Yourself »

Columns Using Rest

I am 150px

I am the rest

Example using w3-rest

<div class="w3-row">
    <div class="w3-col" style="width:150px"><p>150px</p></div>
    <div class="w3-rest"><p>rest</p></div>
</div>
Try It Yourself »

Columns Using Percent

20%

60%

20%

Example using percent

<div class="w3-row">
    <div class="w3-col" style="width:20%"><p>20%</p></div>
    <div class="w3-col" style="width:60%"><p>60%</p></div>
    <div class="w3-col" style="width:20%"><p>20%</p></div>
</div>
Try It Yourself »

The w3-content Class

The w3-content class defines a container for fixed size centered content:

Example

<body class="w3-content" style="max-width:500px">

<div class="w3-container w3-card-2 w3-indigo">
  <h1>Movies 2014</h1>
</div>

<ul class="w3-ul">
  <li>
    <h3>Frozen</h3>
    <p>The social media response
    to the animations was ridiculous.</p>
  </li>
  <li>
    <h3>The Fault in Our Stars</h3>
    <p>Touching, gripping and genuinely well made.</p>
  </li>
  <li>
    <h3>The Avengers</h3>
    <p>The Avengers is a hugely bankable franchise for Marvel and Disney.</p>
   </li>
</ul>

<div class="w3-container w3-indigo w3-xlarge">
  <h5>Movies 2014</h5>
</div>

</body>
Try It Yourself »

12 Column responsive fluid grid

W3.CSS also supports an advanced 12 column responsive fluid grid.

Resize the page to see the effect!

1
2
3
4
5
6
7
8
9
10
11
12

This part will occupy 12 columns on a small screen, 4 on a medium screen, and 3 on a large screen.

This part will occupy 12 columns on a small screen, 8 on a medium screen, and 9 on a large screen.

1
2
3
4
5
6
7
8
9
10
11
12

You will learn more about the fluid grid in a later chapter.