Add border width utility (#31484)

Co-authored-by: XhmikosR <[email protected]>
Co-authored-by: Martijn Cuppens <[email protected]>

scss/_utilities.scss

@@ -79,6 +79,11 @@ $utilities: map-merge(
       class: border,
       values: map-merge($theme-colors, ("white": $white))
     ),
+    "border-width": (
+      property: border-width,
+      class: border,
+      values: $border-widths
+    ),
     // Sizing utilities
     "width": (
       property: width,

scss/_variables.scss

@@ -338,6 +338,14 @@ $border-color:                $gray-300 !default;
 $border-radius:               .25rem !default;
 $border-radius-sm:            .2rem !default;
 $border-radius-lg:            .3rem !default;
+$border-widths: (
+  0: 0,
+  1: 1px,
+  2: 2px,
+  3: 3px,
+  4: 4px,
+  5: 5px
+) !default;
 
 $rounded-pill:                50rem !default;
 

site/content/docs/5.0/migration.md

@@ -15,6 +15,7 @@ toc: true
   - Changed the Sass file from `scss/helpers/_screenreaders.scss` to `scss/helpers/_visually-hidden.scss`
   - Renamed `.sr-only` and `.sr-only-focusable` to `.visually-hidden` and `.visually-hidden-focusable`
   - Renamed `sr-only()` and `sr-only-focusable()` mixins to `visually-hidden()` and `visually-hidden-focusable()`.
+- Add border width utility, see [31484](https://github.com/twbs/bootstrap/pull/31484)
 
 ### Docs
 

site/content/docs/5.0/utilities/borders.md

@@ -43,6 +43,16 @@ Change the border color using utilities built on our theme colors.
 <span class="border border-white"></span>
 {{< /example >}}
 
+### Border-width
+
+{{< example class="bd-example-border-utils" >}}
+<span class="border border-1"></span>
+<span class="border border-2"></span>
+<span class="border border-3"></span>
+<span class="border border-4"></span>
+<span class="border border-5"></span>
+{{< /example >}}
+
 ## Border-radius
 
 Add classes to an element to easily round its corners.