From 9ee9b8a1e8f6b2c9d1cbec6cf5c04ac5b8a2b378 Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Fri, 25 Oct 2019 11:37:52 +0200 Subject: [PATCH] Add configurable button text wrapping (#29554) --- scss/_buttons.scss | 1 + scss/_variables.scss | 1 + site/content/docs/4.3/components/buttons.md | 4 ++++ 3 files changed, 6 insertions(+) diff --git a/scss/_buttons.scss b/scss/_buttons.scss index a12bb0e998..f860d96e31 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 6f902f1420..b4dff2cf59 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 991dec7457..73cb838032 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 `