Add configurable button text wrapping (#29554)

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 48b21e22683700bd4100fc6ce7ca3c4fe4a2ad6d..e87d3393a16dae9cdbf343315e173659aa9c679b 100644 (file)
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -10,6 +10,7 @@
   font-weight: $btn-font-weight;
   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 eabe960df895c106dcdf0a3394bc80f8624e24a7..cc4e0ad5e49fadbc5de9b9e59c6e588126960d0b 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -419,6 +419,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/docs/4.3/components/buttons.md b/site/docs/4.3/components/buttons.md
index f26a54090b7efd40f33f9129a546a4f50ed948a8..b0856f5fc5c392f04b54acf5f83d3edbd2cd6cd9 100644 (file)
--- a/site/docs/4.3/components/buttons.md
+++ b/site/docs/4.3/components/buttons.md
@@ -20,6 +20,10 @@ Bootstrap includes several predefined button styles, each serving its own semant
 
 {% include callout-warning-color-assistive-technologies.md %}
 
+## 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).