Link helpers & use utility API for all utilities

4 files changed, 21 insertions, 15 deletions

diff --git a/site/content/docs/4.3/helpers/colored-links.md b/site/content/docs/4.3/helpers/colored-links.md
new file mode 100644
index 000000000..f75cae427
--- /dev/null
+++ b/site/content/docs/4.3/helpers/colored-links.md
@@ -0,0 +1,17 @@
+---
+layout: docs
+title: Colored links
+description: Colored links with hover states
+group: helpers
+toc: false
+---
+
+You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors#colors" >}}), these classes have a `:hover` and `:focus` state.
+
+{{< example >}}
+{{< colored-links.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<a href="#" class="link-{{ .name }}">{{ .name | title }} link</a>
+{{- end -}}
+{{< /colored-links.inline >}}
+{{< /example >}}
diff --git a/site/content/docs/4.3/helpers/text-truncation.md b/site/content/docs/4.3/helpers/text-truncation.md
index 466bb1c46..a92a171fd 100644
--- a/site/content/docs/4.3/helpers/text-truncation.md
+++ b/site/content/docs/4.3/helpers/text-truncation.md
@@ -3,11 +3,9 @@ layout: docs
 title: Text truncation
 description: Truncate long strings of text with an ellipsis.
 group: helpers
-toc: true
+toc: false
 ---
 
-## Text truncation
-
 For longer content, you can add a `.text-truncate` class to truncate the text with an ellipsis. **Requires `display: inline-block` or `display: block`.**
 
 {{< example >}}
diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md
index b530421b6..c550b69b7 100644
--- a/site/content/docs/4.3/migration.md
+++ b/site/content/docs/4.3/migration.md
@@ -60,6 +60,7 @@ Changes to Reboot, typography, tables, and more.
 - Reset default horizontal `padding-left` on `<ul>` and `<ol>` elements from browser default `40px` to `2rem`.
 - Simplified table styles (no more 2px border on `thead > th` elements) and tightened cell padding.
 - Dropped `.pre-scrollable` class. [See #29135](https://github.com/twbs/bootstrap/pull/29135)
+- `.text-*` utilities do not add hover and focus states to links anymore. `.link-*` helper classes can be used instead. [See #29267](https://github.com/twbs/bootstrap/pull/29267)
 
 ## Forms
 
diff --git a/site/content/docs/4.3/utilities/colors.md b/site/content/docs/4.3/utilities/colors.md
index 13b204d41..62a35b059 100644
--- a/site/content/docs/4.3/utilities/colors.md
+++ b/site/content/docs/4.3/utilities/colors.md
@@ -8,6 +8,8 @@ toc: true
 
 ## 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.
+
 {{< example >}}
 {{< colors.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
@@ -21,18 +23,6 @@ toc: true
 <p class="text-white-50 bg-dark">.text-white-50</p>
 {{< /example >}}
 
-Contextual text classes also work well on anchors with the provided hover and focus states. **Note that the `.text-white` and `.text-muted` class has no additional link styling beyond underline.**
-
-{{< example >}}
-{{< colors.inline >}}
-{{- range (index $.Site.Data "theme-colors") }}
-<p><a href="#" class="text-{{ .name }}{{ if eq .name "light" }} bg-dark{{ end }}">{{ .name | title }} link</a></p>
-{{- end -}}
-{{< /colors.inline >}}
-<p><a href="#" class="text-muted">Muted link</a></p>
-<p><a href="#" class="text-white bg-dark">White link</a></p>
-{{< /example >}}
-
 ## Background color
 
 Similar to the contextual text color classes, easily set the background of an element to any contextual class. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` utilities.