diff options
author | Mark Otto <markdotto@gmail.com> | 2022-04-30 19:58:10 +0300 |
---|---|---|
committer | Mark Otto <otto@github.com> | 2022-04-30 22:55:27 +0300 |
commit | 1ac2997cf623f8bf4217aab6bdd573b9f1ee7e48 (patch) | |
tree | 6573180a33daf7f02499c4e5dc265bffe57a8d3d /site/content/docs | |
parent | 8cd3c3e3bc6b966c2be9491091ad1c0c629a4b30 (diff) |
Update badges, cards, and toasts to use new helpers
Diffstat (limited to 'site/content/docs')
-rw-r--r-- | site/content/docs/5.1/components/badge.md | 10 | ||||
-rw-r--r-- | site/content/docs/5.1/components/card.md | 6 | ||||
-rw-r--r-- | site/content/docs/5.1/components/toasts.md | 4 |
3 files changed, 12 insertions, 8 deletions
diff --git a/site/content/docs/5.1/components/badge.md b/site/content/docs/5.1/components/badge.md index e00b21a12b..55b1ffb851 100644 --- a/site/content/docs/5.1/components/badge.md +++ b/site/content/docs/5.1/components/badge.md @@ -27,7 +27,7 @@ Badges can be used as part of links or buttons to provide a counter. {{< example >}} <button type="button" class="btn btn-primary"> - Notifications <span class="badge bg-secondary">4</span> + Notifications <span class="badge text-bg-secondary">4</span> </button> {{< /example >}} @@ -62,12 +62,14 @@ You can also replace the `.badge` class with a few more utilities without a coun ## Background colors -Use our background utility classes to quickly change the appearance of a badge. Please note that when using Bootstrap's default `.bg-light`, you'll likely need a text color utility like `.text-dark` for proper styling. This is because background utilities do not set anything but `background-color`. +{{< added-in "5.2.0" >}} + +Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]({{< docsref "helpers/color-background" >}}). Previously it was required to manually pair your choice of [`.text-{color}`]({{< docsref "/utilities/colors" >}}) and [`.bg-{color}`]({{< docsref "/utilities/background" >}}) utilities for styling, which you still may use if you prefer. {{< example >}} {{< badge.inline >}} {{- range (index $.Site.Data "theme-colors") }} -<span class="badge bg-{{ .name }}{{ with .contrast_color }} text-{{ . }}{{ end }}">{{ .name | title }}</span>{{- end -}} +<span class="badge text-bg-{{ .name }}">{{ .name | title }}</span>{{- end -}} {{< /badge.inline >}} {{< /example >}} @@ -82,7 +84,7 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger {{< example >}} {{< badge.inline >}} {{- range (index $.Site.Data "theme-colors") }} -<span class="badge rounded-pill bg-{{ .name }}{{ with .contrast_color }} text-{{ . }}{{ end }}">{{ .name | title }}</span>{{- end -}} +<span class="badge rounded-pill text-bg-{{ .name }}">{{ .name | title }}</span>{{- end -}} {{< /badge.inline >}} {{< /example >}} diff --git a/site/content/docs/5.1/components/card.md b/site/content/docs/5.1/components/card.md index 22b413325c..9e395cd5ec 100644 --- a/site/content/docs/5.1/components/card.md +++ b/site/content/docs/5.1/components/card.md @@ -417,12 +417,14 @@ Cards include various options for customizing their backgrounds, borders, and co ### Background and color -Use [text color]({{< docsref "/utilities/colors" >}}) and [background utilities]({{< docsref "/utilities/background" >}}) to change the appearance of a card. +{{< added-in "5.2.0" >}} + +Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]({{< docsref "helpers/color-background" >}}). Previously it was required to manually pair your choice of [`.text-{color}`]({{< docsref "/utilities/colors" >}}) and [`.bg-{color}`]({{< docsref "/utilities/background" >}}) utilities for styling, which you still may use if you prefer. {{< example >}} {{< card.inline >}} {{- range (index $.Site.Data "theme-colors") }} -<div class="card{{ if .contrast_color }} text-{{ .contrast_color }}{{ else }} text-white{{ end }} bg-{{ .name }} mb-3" style="max-width: 18rem;"> +<div class="card text-bg-{{ .name }} mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">{{ .name | title }} card title</h5> diff --git a/site/content/docs/5.1/components/toasts.md b/site/content/docs/5.1/components/toasts.md index 02fdff2d32..e0750d5342 100644 --- a/site/content/docs/5.1/components/toasts.md +++ b/site/content/docs/5.1/components/toasts.md @@ -180,10 +180,10 @@ Alternatively, you can also add additional controls and components to toasts. ### Color schemes -Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.bg-primary` and `.text-white` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`. +Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.text-bg-primary` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`. {{< example class="bg-light" >}} -<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true"> +<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true"> <div class="d-flex"> <div class="toast-body"> Hello, world! This is a toast message. |