Sizing

Sizing utility classes are available for setting a width or height on an element. The sizing utilities share the same modular scale as the spacing utilities.

Note: for percentage width layouts, see the the grid system.

Classes

.width-[size][-breakpoint]
.height-[size][-breakpoint]
  • size is a modular scale number from 0 to 9, or “full” for 100%.
  • breakpoint is an optional responsive breakpoint (sm, md, lg, xl)

Examples:

  • .width-5
  • .width-full
  • .height-3.height-full-xl

Related:

<div>
    <div>
        <p><code class="text-color-hint">.width-0.height-0</code>
        </p>
        <div class="width-0 height-0 sizing-example"></div>
        <hr/>
    </div>
    <div>
        <p><code class="text-color-hint">.width-1.height-1</code>
        </p>
        <div class="width-1 height-1 sizing-example"></div>
        <hr/>
    </div>
    <div>
        <p><code class="text-color-hint">.width-2.height-2</code>
        </p>
        <div class="width-2 height-2 sizing-example"></div>
        <hr/>
    </div>
    <div>
        <p><code class="text-color-hint">.width-3.height-3</code>
        </p>
        <div class="width-3 height-3 sizing-example"></div>
        <hr/>
    </div>
    <div>
        <p><code class="text-color-hint">.width-4.height-4</code>
        </p>
        <div class="width-4 height-4 sizing-example"></div>
        <hr/>
    </div>
    <div>
        <p><code class="text-color-hint">.width-5.height-5</code>
        </p>
        <div class="width-5 height-5 sizing-example"></div>
        <hr/>
    </div>
    <div>
        <p><code class="text-color-hint">.width-6.height-6</code>
        </p>
        <div class="width-6 height-6 sizing-example"></div>
        <hr/>
    </div>
    <div>
        <p><code class="text-color-hint">.width-7.height-7</code>
        </p>
        <div class="width-7 height-7 sizing-example"></div>
        <hr/>
    </div>
    <div>
        <p><code class="text-color-hint">.width-8.height-8</code>
        </p>
        <div class="width-8 height-8 sizing-example"></div>
        <hr/>
    </div>
    <div>
        <p><code class="text-color-hint">.width-9.height-9</code>
        </p>
        <div class="width-9 height-9 sizing-example"></div>
        <hr/>
    </div>
    <div>
        <p><code class="text-color-hint">.width-full.height-full</code>
        </p>
        <div class="width-full height-full sizing-example"></div>
        <hr/>
    </div>
</div>
import * as React from 'react';
import classes from 'classnames';

function Example({ size }) {
  return (
    <div>
      <p>
        <code className="text-color-hint">
          .width-{size}.height-{size}
        </code>
      </p>
      <div
        className={classes(`width-${size}`, `height-${size}`, 'sizing-example')}
      />
      <hr />
    </div>
  );
}

function SizingExamples() {
  return (
    <div>
      <Example size={0} />
      <Example size={1} />
      <Example size={2} />
      <Example size={3} />
      <Example size={4} />
      <Example size={5} />
      <Example size={6} />
      <Example size={7} />
      <Example size={8} />
      <Example size={9} />
      <Example size="full" />
    </div>
  );
}

export default SizingExamples;
/* No context defined for this component. */
  • Content:
    // ------------------------------
    // Responsive sizing utilities
    // ------------------------------
    //
    // Width & height classes that use the same modular scale as the spacing classes.
    //
    // [width|height]-[size][-breakpoint]
    // e.g.: .width-5-sm
    //
    // 100% width/height classes are also provided:
    //
    // [width|height]-full[-breakpoint]
    // e.g.: .width-full-sm
    
    // scss-lint:disable ImportantRule
    
    @if $enable-sizing-utilities {
      @each $breakpoint in map-keys($grid-breakpoints) {
        @include media-breakpoint-up($breakpoint) {
          $bp: breakpoint-suffix($breakpoint, $grid-breakpoints);
    
          @each $dimension in (width, height) {
            @for $i from 1 through length($spacers) {
              $size: $i - 1;
              $length: nth($spacers, $i);
              .#{$dimension}-#{$size}#{$bp} { #{$dimension}: $length !important; }
            }
    
            .#{$dimension}-full#{$bp} { #{$dimension}: 100% !important; }
          }
        }
      }
    }
    
  • URL: /components/raw/sizing/_sizing.scss
  • Filesystem Path: library/utilities/sizing/_sizing.scss
  • Size: 929 Bytes