diff options
| author | Martijn Cuppens <[email protected]> | 2019-10-25 11:37:52 +0200 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2019-10-25 12:37:52 +0300 |
| commit | 9ee9b8a1e8f6b2c9d1cbec6cf5c04ac5b8a2b378 (patch) | |
| tree | ff88a053413dbf15f78e50464d7cd56656822707 | |
| parent | b3dfcdc7ed066469074e96d9ca80b0684d185d82 (diff) | |
| download | bootstrap-9ee9b8a1e8f6b2c9d1cbec6cf5c04ac5b8a2b378.tar.xz bootstrap-9ee9b8a1e8f6b2c9d1cbec6cf5c04ac5b8a2b378.zip | |
Add configurable button text wrapping (#29554)
| -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). |