THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

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

Example

<img class="w3-circle" src="img_car.png" alt="Car">
Try It Yourself »

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 »