rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

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

Browse Source 
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>
This commit is contained in:
EricDunsworth 2022-11-29 02:07:27 -05:00 committed by GitHub
parent fc3f4b67d6
commit 019a977481
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 3 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
site/content/docs/5.2/utilities/background.md
View File

@ -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

1
site/content/docs/5.2/utilities/colors.md
View File

@ -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>