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 »

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 »