What is the w3-col class used for?

w3-col marks an element as a grid column inside a w3-row, with size classes like s12 m6 l4 setting its width (out of 12) at each breakpoint.

<div class="w3-row">
    <div class="w3-col s12 m6 l4">Content</div>
</div>

Size modifiers:

• s1 - s12: Width on small screens (< 601px)
• m1 - m12: Width on medium screens (601-992px)
• l1 - l12: Width on large screens (> 992px)

The number represents columns out of 12:

• l4 = 4/12 = 33.33% width on large screens
• m6 = 6/12 = 50% width on medium screens
• s12 = 12/12 = 100% width on small screens

Tip: You can combine multiple size classes on one element to define different widths per breakpoint.