diff options
Diffstat (limited to '')
| -rw-r--r-- | site/content/docs/5.3/components/buttons.md (renamed from site/content/docs/5.2/components/buttons.md) | 20 |
1 files changed, 17 insertions, 3 deletions
diff --git a/site/content/docs/5.2/components/buttons.md b/site/content/docs/5.3/components/buttons.md index c2fdd75..ae58fca 100644 --- a/site/content/docs/5.2/components/buttons.md +++ b/site/content/docs/5.3/components/buttons.md @@ -6,9 +6,23 @@ group: components toc: true --- -## Examples +## Base class -Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control. +Bootstrap has a base `.btn` class that sets up basic styles such as padding and content alignment. By default, `.btn` controls have a transparent border and background color, and lack any explicit focus and hover styles. + +{{< example >}} +<button type="button" class="btn">Base class</button> +{{< /example >}} + +The `.btn` class is intended to be used in conjunction with our button variants, or to serve as a basis for your own custom styles. + +{{< callout warning >}} +If you are using the `.btn` class on its own, remember to at least define some explicit `:focus` and/or `:focus-visible` styles. +{{< /callout >}} + +## Variants + +Bootstrap includes several button variants, each serving its own semantic purpose, with a few extras thrown in for more control. {{< example >}} {{< buttons.inline >}} @@ -21,7 +35,7 @@ Bootstrap includes several predefined button styles, each serving its own semant {{< /example >}} {{< callout info >}} -{{< partial "callout-warning-color-assistive-technologies.md" >}} +{{< partial "callouts/warning-color-assistive-technologies.md" >}} {{< /callout >}} ## Disable text wrapping |