W3.CSS Utilities (Helpers)
Color Utilities (Helpers)
My container is green.
My container is red.
My container is light grey and my text color is blue.
Example
<div class="w3-container w3-green">
<p>I am green.</p>
</div>
<div class="w3-container w3-red">
<p>I am red.</p>
</div>
<div class="w3-container w3-light-grey">
<p class="w3-text-blue">My container is light grey and my text color is
blue.</p>
</div>
Try It Yourself »
 |
Utilities are often called Helpers. |
|---|
Padding Utilities (Helpers)
I have padding on all sides.
I have top and bottom padding.
Example
<div class="w3-padding-jumbo w3-blue">
<p>I have padding on all sides.</p>
</div>
Try It Yourself »
Example
<div class="w3-padding-16 w3-blue">
<p>I have top and bottom padding.</p>
</div>
Try It Yourself »
Border Utilities
I have a left and right border
I have borders on all sides.
I have rounded borders.
Example
<div class="w3-border-left w3-border-right">
<p>I have a
left and right border.</p>
</div>
<div class="w3-border">
<p>I have borders on all sides.</p>
</div>
<div class="w3-border
w3-round-xlarge">
<p>I have rounded borders.</p>
</div>
Try It Yourself »
Size Utilities
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 »
Margin Utilities
I have a 64px margin on all sides.
Example
<div class="w3-container
w3-margin-64">
<p>I have a 64px margin on all sides.</p>
</div>
Try It Yourself »
Circle
Center
The w3-center class centers an element.
Example
<div class="w3-container w3-center w3-green">
<img
class="w3-circle"
src="img_car.png" alt="Car">
</div>
Try It Yourself »
Floating Utilities
Float left
Float right
Example
<div class="w3-container w3-light-grey">
<div class="w3-left
w3-green">Float left</div>
<div class="w3-right w3-blue">Float
right</div>
</div>
Try It Yourself »
