Latest web development tutorials
 

W3.CSS Utilities (Helpers)


Utility Classes

Most of W3.CSS is built around utility classes providing padding, margins, sizes, and positioning.

Note: Utility classes are often called Helper classes.


Padding Classes

The w3-padding-size classes adds padding to any HTML element:

The w3-padding-jumbo class adds 32px top and bottom and 64px left and right.

The w3-padding-xxlarge class adds 24px top and bottom and 48px left and right.

The w3-padding-xlarge class adds 16px top and bottom and 32px left and right.

The w3-padding-large class adds 12px top and bottom and 24px left and right.

The w3-padding-medium class adds 8px top and bottom and 16px left and right.

The w3-padding-small class adds 4px top and bottom and 8px left and right.

The w3-padding-tiny class adds 2px top and bottom and 4px left and right.

Example

<div class="w3-container w3-padding-xlarge">

<p>I have 16px top and bottom padding and 32px left and right padding.</p>

</div>
Try It Yourself »

The w3-padding-hor-number classes adds horizontal (top and bottom) padding to any HTML element:

The w3-padding-hor-4 class adds 4px top and bottom padding.

The w3-padding-hor-8 class adds 8px top and bottom padding.

The w3-padding-hor-16 class adds 16px top and bottom padding.

The w3-padding-hor-32 class adds 32px top and bottom padding.

The w3-padding-hor-64 class adds 64px top and bottom padding.

Example

<div class="w3-container w3-padding-hor-16">
I have 16px top and bottom padding
</div>
Try It Yourself »

The w3-padding-ver-number classes adds vertical (left and right) padding to any HTML element:

The w3-padding-ver-4 class adds 4px left and right padding.

The w3-padding-ver-8 class adds 8px left and right padding.

The w3-padding-ver-16 class adds 16x left and right padding.

The w3-padding-ver-32 class adds 32px left and right padding.

The w3-padding-hor-48 class adds 64px left and right padding.

Example

<div class="w3-container w3-padding-ver-16">
  <p>I have 16px left and right padding</p>
</div>
Try It Yourself »

Margin Classes

The w3-margin classes add margins to an element:

The w3-margin class adds 16px margin to all sides of an element.

The w3-margin-bottom class adds a 16px bottom margin to an element.

The w3-margin-left class adds a 16px left margin to an element.

The w3-margin-right class adds a 16px right margin to an element.

The w3-margin-top class adds a 16px top margin to an element.

Example

<div class="w3-container w3-margin">
I have 16px margin on all sides
</div>
Try It Yourself »

Sizing Classes

The w3-size class changes the font-size of an element:

I'm tiny (using w3-tiny)

I'm small (using w3-small)

I'm medium. The default.

I'm large (using w3-large)

I'm xlarge (using w3-xlarge)

Example

<p class="w3-small">I'm small (using w3-small)</p>
<p>I'm medium. The default.</p>
<p class="w3-large">I'm large (using w3-large)</p>
<p class="w3-xlarge">I'm xlarge (using w3-xlarge)</p>
Try It Yourself »

You can read more about sizing classes in the chapter W3.CSS Typography.


Rounding Classes

The w3-round-size class adds rounded borders to an element:

Round
Rounder
Rounder
Roundest

Example

<div class="w3-round w3-teal w3-padding">Round</div>
<div class="w3-round-large w3-teal w3-padding">Rounder</div>
<div class="w3-round-xlarge w3-teal w3-padding">Rounder</div>
<div class="w3-round-jumbo w3-teal w3-padding">Roundest</div>
Try It Yourself »

The Circle Class

Example

<img class="w3-circle" src="img_car.jpg" alt="Car">
Try It Yourself »

The Center Class

The w3-center class centers an element:




Example

<div class="w3-container w3-center w3-green">
  <img class="w3-circle" src="img_car.jpg" alt="Car">
</div> 
Try It Yourself »

Floating Classes

The w3-left class floats an element to the left, the w3-right class floats an element to the right:

Float left
Float right

Example

<div class="w3-container w3-light-grey">
  <div class="w3-left w3-red">Float left</div>
  <div class="w3-right w3-blue">Float right</div>
</div>
Try It Yourself »

Show / Hide Classes

The w3-hide-small|medium|large class hides an element on a specific screen size.

Note: Resize the browser window to understand how it works:

I will be hidden on small screens (phones)

I will be hidden on medium screens (tablets)

I will be hidden on large screens (laptops/desktop)

Example

<p class="w3-hide-small">I will be hidden on small screens (phone)</p>
<p class="w3-hide-medium">I will be hidden on medium screens (tablet)</p>
<p class="w3-hide-large">I will be hidden on large screens (laptop/desktop)</p>
Try It Yourself »