diff options
| author | Martijn Cuppens <martijn.cuppens@gmail.com> | 2019-10-25 12:37:52 +0300 |
|---|---|---|
| committer | XhmikosR <xhmikosr@gmail.com> | 2019-11-02 11:02:07 +0300 |
| commit | f55566e36b35ecedd8f40f1fce2fcb1caf902946 (patch) | |
| tree | baad502a4771fca49ab98325610e835751356269 | |
| parent | 7ecfa6a343c84324bab9306710cc93f77b86b22d (diff) | |
Add configurable button text wrapping (#29554)
| -rw-r--r-- | scss/_buttons.scss | 1 | ||||
| -rw-r--r-- | scss/_variables.scss | 1 | ||||
| -rw-r--r-- | site/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 48b21e2268..e87d3393a1 100644 --- 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 eabe960df8..cc4e0ad5e4 100644 --- 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 f26a54090b..b0856f5fc5 100644 --- 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). |