W3.CSS — Utilities

Padding Classes

<div class="w3-padding-tiny">Tiny padding</div>
<div class="w3-padding-small">Small padding</div>
<div class="w3-padding">Default padding</div>
<div class="w3-padding-large">Large padding</div>
<div class="w3-padding-16">16px padding</div>
<div class="w3-padding-24">24px padding</div>
<div class="w3-padding-32">32px padding</div>
<div class="w3-padding-48">48px padding</div>
<div class="w3-padding-64">64px padding</div>

Margin Classes

<div class="w3-margin">Default margin</div>
<div class="w3-margin-top">Top margin</div>
<div class="w3-margin-right">Right margin</div>
<div class="w3-margin-bottom">Bottom margin</div>
<div class="w3-margin-left">Left margin</div>

Display Classes

<div class="w3-show">Visible</div>
<div class="w3-hide">Hidden</div>
<div class="w3-block">Block</div>
<div class="w3-inline">Inline</div>
<div class="w3-inline-block">Inline block</div>

Position Classes

<div class="w3-top">Fixed to top</div>
<div class="w3-bottom">Fixed to bottom</div>
<div class="w3-left">Fixed to left</div>
<div class="w3-right">Fixed to right</div>
<div class="w3-center">Centered</div>

Shadow Classes

<div class="w3-shadow">Default shadow</div>
<div class="w3-shadow-2">Shadow 2</div>
<div class="w3-shadow-4">Shadow 4</div>
<div class="w3-shadow-8">Shadow 8</div>
<div class="w3-shadow-16">Shadow 16</div>

Utility Examples

<!-- Card with utilities -->
<div class="w3-card-4 w3-padding-large w3-margin w3-shadow">
    <h4>Styled Card</h4>
    <p>This card uses utility classes.</p>
</div>

<!-- Responsive layout with utilities -->
<div class="w3-container w3-padding-32">
    <div class="w3-row-padding">
        <div class="w3-half w3-margin-bottom">
            <div class="w3-card-4 w3-padding">
                <h4>Left Column</h4>
            </div>
        </div>
        <div class="w3-half w3-margin-bottom">
            <div class="w3-card-4 w3-padding">
                <h4>Right Column</h4>
            </div>
        </div>
    </div>
</div>

Utility Classes Summary

Category	Classes
Padding	w3-padding, w3-padding-small, w3-padding-large
Margin	w3-margin, w3-margin-top, w3-margin-bottom
Display	w3-show, w3-hide, w3-block, w3-inline
Position	w3-top, w3-bottom, w3-left, w3-right, w3-center
Shadow	w3-shadow, w3-shadow-2, w3-shadow-4

Mini Practice

Create HTML code that:

1. Uses different padding classes
2. Adds margin utilities
3. Creates a layout with display utilities
4. Uses shadow and position utilities

Up Next

Congratulations! You've completed the W3.CSS course. Continue building beautiful websites with W3.CSS.