Add configurable button text wrapping (#29554)

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index a12bb0e9984e65f68f01a98765688035cf7d5209..f860d96e3183acfa7a01589b3e841854016a4af0 100644 (file)
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -11,6 +11,7 @@
   line-height: $btn-line-height;
   color: $body-color;
   text-align: center;
+  white-space: $btn-white-space;
   vertical-align: middle;
   cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
   user-select: none;

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 6f902f14205f7e563ef7ea467ec3f6f72f28b60b..b4dff2cf59568e0c189f5c0d8c8753014ea8daa9 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -540,6 +540,7 @@ $btn-padding-x:               $input-btn-padding-x !default;
 $btn-font-family:             $input-btn-font-family !default;
 $btn-font-size:               $input-btn-font-size !default;
 $btn-line-height:             $input-btn-line-height !default;
+$btn-white-space:             null !default; // Set to `nowrap` to prevent text wrapping
 
 $btn-padding-y-sm:            $input-btn-padding-y-sm !default;
 $btn-padding-x-sm:            $input-btn-padding-x-sm !default;

diff --git a/site/content/docs/4.3/components/buttons.md b/site/content/docs/4.3/components/buttons.md
index 991dec7457ddbc770dc6a7039c3f2f29864a74b6..73cb838032471c4a1d149f0f91287c24d2e614c7 100644 (file)
--- a/site/content/docs/4.3/components/buttons.md
+++ b/site/content/docs/4.3/components/buttons.md
@@ -24,6 +24,10 @@ Bootstrap includes several predefined button styles, each serving its own semant
 {{< partial "callout-warning-color-assistive-technologies.md" >}}
 {{< /callout >}}
 
+## Disable text wrapping
+
+If you don't want the button text to wrap, you can add the `.text-nowrap` class to the button. In Sass, you can set `$btn-white-space: nowrap` to disable text wrapping for each button.
+
 ## Button tags
 
 The `.btn` classes are designed to be used with the `<button>` element. However, you can also use these classes on `<a>` or `<input>` elements (though some browsers may apply a slightly different rendering).