Docs: Add black text/background examples (#37538)

These classes have existed since 5.1 but weren't previously documented.

Specifically:

* .text-black

* .bg-black

* .bg-black.bg-gradient

Co-authored-by: Mark Otto <markd.otto@gmail.com>

diff --git a/site/content/docs/5.2/utilities/background.md b/site/content/docs/5.2/utilities/background.md
index ef7b2468e898b30452d2c27cd083050294d4545b..dad71ec372a7e61c69e5386b069220277a602fc8 100644 (file)
--- a/site/content/docs/5.2/utilities/background.md
+++ b/site/content/docs/5.2/utilities/background.md
@@ -17,11 +17,11 @@ Similar to the contextual text color classes, set the background of an element t
 <div class="p-3 mb-2 bg-{{ .name }}-subtle text-emphasis-{{ .name }}">.bg-{{ .name }}-subtle</div>
 {{- end -}}
 {{< /colors.inline >}}
-
 <p class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</p>
 <p class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</p>
 
 <div class="p-3 mb-2 bg-body text-body">.bg-body</div>
+<div class="p-3 mb-2 bg-black text-white">.bg-black</div>
 <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
 <div class="p-3 mb-2 bg-transparent text-body">.bg-transparent</div>
 {{< /example >}}
@@ -38,6 +38,7 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-
 <div class="p-3 mb-2 bg-{{ .name }} bg-gradient{{ with .contrast_color }} text-{{ . }}{{ else }} text-white{{ end }}">.bg-{{ .name }}.bg-gradient</div>
 {{- end -}}
 {{< /colors.inline >}}
+<div class="p-3 mb-2 bg-black bg-gradient text-white">.bg-black.bg-gradient</div>
 {{< /markdown >}}
 
 ## Opacity

diff --git a/site/content/docs/5.2/utilities/colors.md b/site/content/docs/5.2/utilities/colors.md
index 94418ac5e2ff2cc22881596c48933c42611f75b7..4b1647242c08f68b44082f26be4c8e2ef10752fc 100644 (file)
--- a/site/content/docs/5.2/utilities/colors.md
+++ b/site/content/docs/5.2/utilities/colors.md
@@ -24,6 +24,7 @@ Colorize text with color utilities. If you want to colorize links, you can use t
 <p class="text-body-secondary">.text-body-secondary</p>
 <p class="text-body-tertiary">.text-body-tertiary</p>
 
+<p class="text-black bg-white">.text-black</p>
 <p class="text-white bg-dark">.text-white</p>
 <p class="text-black-50 bg-white">.text-black-50</p>
 <p class="text-white-50 bg-dark">.text-white-50</p>