Add border width utility (#31484)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 7c818685a4450f1f129092d3fe1584ffe83c4cd4..69615ec4e62edd54610dee65eb7ff87798081500 100644 (file)
--- a/scss/_utilities.scss
+++ b/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,

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 8ac8b143bf050c5b56f0c5f3f15c3ab1939285bc..dee45b7503d3236a553ee76ce547f71ea197dd80 100644 (file)
--- a/scss/_variables.scss
+++ b/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;
 

diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md
index 03657ea0fd2974b85983db30b61c18a072728626..2c9dc4011cc7c5664d7962bd0cadefe440a7cb3a 100644 (file)
--- a/site/content/docs/5.0/migration.md
+++ b/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
 

diff --git a/site/content/docs/5.0/utilities/borders.md b/site/content/docs/5.0/utilities/borders.md
index 5cf1ed29db69d28ba40ebd1597707b40b0bd0f97..ec2a7cbc04eb9474557bb93a3e0ca83163b2d4cf 100644 (file)
--- a/site/content/docs/5.0/utilities/borders.md
+++ b/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.