W3.CSS Utilities (Helpers)
Utility Classes
Most of W3.CSS is built around utility classes providing padding, margins, sizes, and positioning.
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)
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:
The Circle Class
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:
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:
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 »
