Width

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 _config.scss. Each number is a multiple of the $spacer variable, which defaults to 1rem.

<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.

<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.

<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.

<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.

<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.

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

Dynamic viewport width

The vw unit measures the large viewport width. The browser calculates that width as if every retractable browser interface is retracted. The value stays the same while the user scrolls.

The dvw unit measures the viewport width that the user sees now. The browser updates the value when it expands or retracts a browser interface. Use dvw-100 and min-dvw-100 when a browser interface changes the viewport width.

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

Most browsers put the retractable interface at the top and the bottom of the screen. That interface changes the viewport height, not the viewport width. On these browsers, dvw and vw give you the same value. The dvw unit is therefore less useful than dvh. We ship it so that the width utilities match the height utilities.

Small and large viewport units

CSS gives you two more viewport width units:

• svw is the small viewport width. The browser calculates it as if every retractable browser interface is expanded.
• lvw is the large viewport width. The browser calculates it as if every retractable browser interface is retracted. Current browsers give vw the same value.

We do not ship utilities for svw and lvw, because most layouts need w-100 or dvw. Add them with the utilities API:

          // my-bootstrap.scss
@use "bootstrap/scss/bootstrap" with (
  $utilities: (
    "small-viewport-width": (
      property: width,
      class: svw,
      values: (100: 100svw)
    ),
    "min-small-viewport-width": (
      property: min-width,
      class: min-svw,
      values: (100: 100svw)
    ),
    "large-viewport-width": (
      property: width,
      class: lvw,
      values: (100: 100lvw)
    ),
    "min-large-viewport-width": (
      property: min-width,
      class: min-lvw,
      values: (100: 100lvw)
    )
  )
);
        

This adds .svw-100, .min-svw-100, .lvw-100, and .min-lvw-100.

CSS

Sass utilities API

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

"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)
),
"dynamic-viewport-width": (
  property: width,
  class: dvw,
  values: (100: 100dvw)
),
"min-dynamic-viewport-width": (
  property: min-width,
  class: min-dvw,
  values: (100: 100dvw)
),