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-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:
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
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:
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:
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 »