diff --git a/.changeset/gold-chairs-walk.md b/.changeset/gold-chairs-walk.md
new file mode 100644
index 0000000000..cbec99f30a
--- /dev/null
+++ b/.changeset/gold-chairs-walk.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-styles': patch
+---
+
+Added breakpoint specific utility classes to set width to `25%`, `50%`, `75%`, `100%`, or `auto`.
diff --git a/packages/documentation/src/stories/components/button/button.docs.mdx b/packages/documentation/src/stories/components/button/button.docs.mdx
index e2c173ee4e..67ca7b9716 100644
--- a/packages/documentation/src/stories/components/button/button.docs.mdx
+++ b/packages/documentation/src/stories/components/button/button.docs.mdx
@@ -44,3 +44,18 @@ Besides the usual and the accent button variations, there are also contextual bu
 <p className="alert alert-warning">These are only allowed for intranet applications!</p>
 
 <Canvas of={ButtonStories.ContextualColors} />
+
+### Full-width
+
+In some situation, it is desirable to display a button using the full available width,
+for example when the button is displayed on mobile and stacked vertically with others.
+
+To achieve that, you can use classes in the format:
+- `.w-{size}` for the xs breakpoint,
+- `.w-{breakpoint}-{size}` for breakpoints from sm to xxl.
+
+For example, a button with classes `w-100 w-lg-auto` will use all available space only when the viewport size is smaller than `lg`.
+
+To learn more about breakpoints, see the <a href="/?path=/docs/foundations-layout-breakpoints--docs">Breakpoints documentation</a>.
+
+<Canvas of={ButtonStories.FullWidth} />
diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/button/button.stories.ts
index 922f8c8c1b..a0d899ce4b 100644
--- a/packages/documentation/src/stories/components/button/button.stories.ts
+++ b/packages/documentation/src/stories/components/button/button.stories.ts
@@ -222,7 +222,7 @@ const Template = {
       `;
     } else {
       const icon = html`
-        <post-icon aria-hidden="true" name=${args.icon}></post-icon>
+        <post-icon aria-hidden="true" name="${args.icon}"></post-icon>
       `;
       const iconOnlyContent = html`
         <span class="visually-hidden">${args.text}</span>
@@ -246,6 +246,7 @@ const Template = {
 };
 
 function createProps(args: Args, isAnimated: boolean) {
+  const additionalClasses = args.additionalClasses ?? [];
   return {
     class: [
       'btn',
@@ -253,6 +254,7 @@ function createProps(args: Args, isAnimated: boolean) {
       args.size,
       isAnimated && 'btn-animated',
       args.iconOnly && 'btn-icon',
+      ...additionalClasses,
     ]
       .filter(c => c && c !== 'null')
       .join(' '),
@@ -326,3 +328,11 @@ export const ContextualColors: Story = {
     variants: ['btn-success', 'btn-info', 'btn-warning', 'btn-danger'],
   },
 };
+
+export const FullWidth: Story = {
+  ...VariantsTemplate,
+  args: {
+    variants: ['btn-primary'],
+    additionalClasses: ['w-sm-100', 'w-md-auto'],
+  },
+};
diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx b/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx
index 3a5b1062a7..7bb0821ef9 100644
--- a/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx
+++ b/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx
@@ -25,13 +25,17 @@ Bootstrap offers sizing classes with the suffixes bellow. They allow you to set
 > - `*-75`
 > - `*-100`
 
-#### Example
-
 <Canvas of={SizingStories.SizesPercent} />
 <div className="hide-col-default">
   <Controls of={SizingStories.SizesPercent} />
 </div>
 
+### Relative to breakpoints
+
+For width, we offer additionally `.w-{breakpoint}-{size}` classes (e.g. `w-md-100`) so that you can size only for some specific breakpoints.
+
+See <a href="/?path=/docs/components-button--docs#full-width">Full-width button</a> for a practical example.
+
 ### Post-Sizes
 
 Post sizes can be used as suffixes in the same way. To find out which size name to use, see the "Size name in classes" column in the reference table above or use the "Example Post-Sizes" below.
@@ -54,8 +58,6 @@ Post sizes can be used as suffixes in the same way. To find out which size name
     .join('\n')}
 ></Source>
 
-#### Example
-
 <Canvas of={SizingStories.Sizes} />
 <div className="hide-col-default">
   <Controls of={SizingStories.Sizes} />
diff --git a/packages/styles/src/components/sizing.scss b/packages/styles/src/components/sizing.scss
index 49c39691ed..95950165f6 100644
--- a/packages/styles/src/components/sizing.scss
+++ b/packages/styles/src/components/sizing.scss
@@ -55,6 +55,21 @@
   }
 }
 
+// Post breakpoints width - e.g. w-sm-100
+@each $breakpoint in map-keys(breakpoints.$grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    @if $breakpoint != 'xs' {
+      @each $prop, $abbrev in (width: w) {
+        @each $size, $length in spacing.$sizes {
+          .#{$abbrev}-#{$breakpoint}-#{$size} {
+            #{$prop}: $length !important;
+          }
+        }
+      }
+    }
+  }
+}
+
 // Generate responsive spacing utility classes, a lot of them
 $cache: ();