THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

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-xlarge class adds 16px top and bottom and 32px 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">
  <p>I have 16px top and bottom padding.</p>
</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">
  <p>I have 16px margin on all sides.</p>
</div>
Try It Yourself »

Font Size 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-large">I'm large (using w3-large)</p>
Try It Yourself »

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


Round Classes

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

w3-round-small
w3-round
w3-round-large
w3-round-xlarge
w3-round-jumbo

Example

<div class="w3-round w3-teal w3-padding">w3-round</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">
  <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:

w3-left
w3-right

Example

<div class="w3-container w3-light-grey">
  <div class="w3-left w3-red">w3-left</div>
  <div class="w3-right w3-blue">w3-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:

w3-hide-small will be hidden on small screens (phones)

w3-hide-medium will be hidden on medium screens (tablets)

w3-hide-large will be hidden on large screens (laptops/desktop)

Example

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