Width

Class	Styles
.w-1	width: 1rem;
.w-2	width: 2rem;
.w-3	width: 3rem;
.w-4	width: 4rem;
.w-5	width: 5rem;
.w-6	width: 6rem;
.w-7	width: 7rem;
.w-8	width: 8rem;
.w-9	width: 9rem;
.w-10	width: 10rem;
.w-11	width: 11rem;
.w-12	width: 12rem;
.w-25	width: 25%;
.w-50	width: 50%;
.w-75	width: 75%;
.w-100	width: 100%;
.w-auto	width: auto;
.w-min	width: min-content;
.w-max	width: max-content;
.w-fit	width: -moz-fit-content; width: fit-content;
.max-w-100	max-width: 100%;
.min-w-0	min-width: 0;
.min-w-100	min-width: 100%;
.vw-100	width: 100vw;
.min-vw-100	min-width: 100vw;

Use width utilities to set the width of elements. Width utilities are generated from the utility API and include support for a preset scale, percentage values, intrinsic sizing keywords, and viewport units.

Width

Set width using .w-{size} utilities for any size from 1 to 12. These classes are generated from the utility API based on the $sizes map in _variables.scss. Each number is a multiple of the $spacer variable, which defaults to 1rem.

Width 12

HTML

<div class="d-flex flex-column gap-3">
  <div class="w-1">…</div>
  <div class="w-2">…</div>
  <div class="w-3">…</div>
  <div class="w-4">…</div>
  <div class="w-5">…</div>
  <div class="w-6">…</div>
  <div class="w-7">…</div>
  <div class="w-8">…</div>
  <div class="w-9">…</div>
  <div class="w-10">…</div>
  <div class="w-11">…</div>
  <div class="w-12">…</div>
</div>

Relative width

Set width relative to the parent element using percentage-based utilities. Includes support for 25%, 50%, 75%, 100%, and auto by default.

Width 25%

Width 50%

Width 75%

Width 100%

Width auto

HTML

<div class="w-25 p-3">Width 25%</div>
<div class="w-50 p-3">Width 50%</div>
<div class="w-75 p-3">Width 75%</div>
<div class="w-100 p-3">Width 100%</div>
<div class="w-auto p-3">Width auto</div>

Intrinsic sizing

Use intrinsic sizing keywords to set width based on content.

Width min-content

Width max-content

Width fit-content

HTML

<div class="w-min p-3">Width min-content</div>
<div class="w-max p-3">Width max-content</div>
<div class="w-fit p-3">Width fit-content</div>

Max width

Set maximum width using max-width utilities.

Max-width 100%

HTML

<div style="width: 50%;">
  <div class="max-w-100" style="width: 200%;">Max-width 100%</div>
</div>

Min width

Set minimum width using min-width utilities.

This content is wider than the min-width: 0 container

Min-width 100%

HTML

<div class="min-w-0 p-3" style="overflow: hidden;">
  <div style="width: 200px;">This content is wider than the min-width: 0 container</div>
</div>
<div class="min-w-100 p-3">Min-width 100%</div>

Viewport width

Set width relative to the viewport using viewport units.

HTML

<div class="vw-100">Width 100vw</div>
<div class="min-vw-100">Min-width 100vw</div>

Beware of the viewport width! Using vw-100 can cause horizontal scrollbars if the content is wider than the viewport, particularly on smaller screens.

CSS

Sass utilities API

Width utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

SCSS

"width": (
  property: width,
  class: w,
  values: map.merge(
    $sizes,
    (
      25: 25%,
      50: 50%,
      75: 75%,
      100: 100%,
      auto: auto,
      min: min-content,
      max: max-content,
      fit: fit-content,
    )
  )
),
"max-width": (
  property: max-width,
  class: max-w,
  values: (100: 100%)
),
"min-width": (
  property: min-width,
  class: min-w,
  values: (
    0: 0,
    100: 100%
  )
),
"viewport-width": (
  property: width,
  class: vw,
  values: (100: 100vw)
),
"min-viewport-width": (
  property: min-width,
  class: min-vw,
  values: (100: 100vw)
),