kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Docs: move color utility callouts to start of page (#31135)

Browse source 
* Move color utility callouts to start of page

Hierarchically/structurally, in the position they are currently at, the two callouts seem like they "belong" just to the "background color" section. Moving them to the start makes it clearer that those two callouts relate to everything in the page (both "Color" and "Background color" classes.

* Change heading level

otherwise the assistive technology callout looks like it's hierarchically under the "Dealing with specificity" heading
This commit is contained in:
Patrick H. Lauke 2020-06-21 13:33:07 +01:00 committed by GitHub
parent 806f64e162
commit d6671d8f2d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
site/content/docs/5.0/utilities/colors.md
View file

@ -6,6 +6,16 @@ group: utilities
toc: true
---
{{< callout info >}}
##### Dealing with specificity
Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `<div>` with the class.
{{< /callout >}}
{{< callout info >}}
{{< partial "callout-warning-color-assistive-technologies.md" >}}
{{< /callout >}}
## Color
Colorize text with color utilities. If you want to colorize links, you can use the [`.link-*` helper classes]({{< docsref "/helpers/colored-links" >}}) which have `:hover` and `:focus` states.
@ -50,13 +60,3 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-
{{- end -}}
{{< /colors.inline >}}
{{< /markdown >}}
{{< callout info >}}
#### Dealing with specificity
Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `<div>` with the class.
{{< /callout >}}
{{< callout info >}}
{{< partial "callout-warning-color-assistive-technologies.md" >}}
{{< /callout >}}