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 »
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 a red bottom border
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-bottom w3-border-red">
<p>I have
a red bottom border.</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 »
Section Utilities
I have a 32px margin top and bottom.
I have a 32px margin top and bottom.
Example
<div class="w3-container
w3-secction-32">
<p>I have a 32px margin top and bottom.</p>
</div>
Try It Yourself »
Round and Circle
Round
Rounder
Rounder
Roundest
Example
<img class="w3-circle"
src="img_car.png" alt="Car">
<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 »
Center
The w3-center class centers an element.
Example
<div class="w3-container w3-center w3-green">
<p>The w3-center
class centers an element.</p>
<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-red">Float left</div>
<div class="w3-right w3-blue">Float
right</div>
</div>
Try It Yourself »
Show/Hide Utilites
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 »
