Skip to main content

Width

Width controls how wide an element is. Use it to make blocks narrower or wider so your layout feels balanced and easy to read.

Usage​

Use numbers to control width in simple steps.

  • width-0 to width-99

Numbers make the width bigger or smaller in simple steps, and they still scale with the screen.

Example​

<div class="width-30">
  <h2>Compact block</h2>
  <p>This block is narrower than the full page.</p>
</div>

Valid values:

  • Whole numbers only (0–99). Leading zeros are OK (width-02 is the same as width-2).
  • Invalid examples: width-100, width-2.5, width--1, width-xx.

Note: If you want a readable text column that adapts automatically, use text-width.