diff options
| -rw-r--r-- | site/content/docs/5.3/components/buttons.md | 16 |
1 files changed, 15 insertions, 1 deletions
diff --git a/site/content/docs/5.3/components/buttons.md b/site/content/docs/5.3/components/buttons.md index 396beec7f..8d9ff0201 100644 --- a/site/content/docs/5.3/components/buttons.md +++ b/site/content/docs/5.3/components/buttons.md @@ -6,7 +6,21 @@ group: components toc: true --- -## Examples +## Base class + +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 additional predefined button styles, 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 >}} + +## Predefined styles Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control. |