diff options
| -rw-r--r-- | scss/_buttons.scss | 1 | ||||
| -rw-r--r-- | scss/_variables.scss | 1 | ||||
| -rw-r--r-- | site/content/docs/4.3/components/buttons.md | 4 |
3 files changed, 6 insertions, 0 deletions
diff --git a/scss/_buttons.scss b/scss/_buttons.scss index a12bb0e99..f860d96e3 100644 --- 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 6f902f142..b4dff2cf5 100644 --- 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 991dec745..73cb83803 100644 --- 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). |