summaryrefslogtreecommitdiffstats
path: root/site/content/docs/5.3/utilities
diff options
context:
space:
mode:
Diffstat (limited to 'site/content/docs/5.3/utilities')
-rw-r--r--site/content/docs/5.3/utilities/float.md11
-rw-r--r--site/content/docs/5.3/utilities/opacity.md2
-rw-r--r--site/content/docs/5.3/utilities/text.md11
3 files changed, 15 insertions, 9 deletions
diff --git a/site/content/docs/5.3/utilities/float.md b/site/content/docs/5.3/utilities/float.md
index a8d3efb..9e3a11f 100644
--- a/site/content/docs/5.3/utilities/float.md
+++ b/site/content/docs/5.3/utilities/float.md
@@ -16,15 +16,18 @@ These utility classes float an element to the left or right, or disable floating
<div class="float-none">Don't float on all viewport sizes</div>
{{< /example >}}
+Use the [clearfix helper]({{< docsref "/helpers/clearfix" >}}) on a parent element to clear floats.
+
## Responsive
Responsive variations also exist for each `float` value.
{{< example >}}
-<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
-<div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
-<div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
-<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br>
+<div class="float-sm-end">Float end on viewports sized SM (small) or wider</div><br>
+<div class="float-md-end">Float end on viewports sized MD (medium) or wider</div><br>
+<div class="float-lg-end">Float end on viewports sized LG (large) or wider</div><br>
+<div class="float-xl-end">Float end on viewports sized XL (extra large) or wider</div><br>
+<div class="float-xxl-end">Float end on viewports sized XXL (extra extra large) or wider</div><br>
{{< /example >}}
Here are all the support classes:
diff --git a/site/content/docs/5.3/utilities/opacity.md b/site/content/docs/5.3/utilities/opacity.md
index 5d253a7..891b46b 100644
--- a/site/content/docs/5.3/utilities/opacity.md
+++ b/site/content/docs/5.3/utilities/opacity.md
@@ -15,6 +15,7 @@ Set the `opacity` of an element using `.opacity-{value}` utilities.
<div class="opacity-75 p-3 m-2 bg-primary text-light fw-bold rounded">75%</div>
<div class="opacity-50 p-3 m-2 bg-primary text-light fw-bold rounded">50%</div>
<div class="opacity-25 p-3 m-2 bg-primary text-light fw-bold rounded">25%</div>
+ <div class="opacity-0 p-3 m-2 bg-primary text-light fw-bold rounded">0%</div>
</div>
```html
@@ -22,6 +23,7 @@ Set the `opacity` of an element using `.opacity-{value}` utilities.
<div class="opacity-75">...</div>
<div class="opacity-50">...</div>
<div class="opacity-25">...</div>
+<div class="opacity-0">...</div>
```
## CSS
diff --git a/site/content/docs/5.3/utilities/text.md b/site/content/docs/5.3/utilities/text.md
index 5787f95..95fe06b 100644
--- a/site/content/docs/5.3/utilities/text.md
+++ b/site/content/docs/5.3/utilities/text.md
@@ -15,10 +15,11 @@ Easily realign text to components with text alignment classes. For start, end, a
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>
-<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p>
-<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
-<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
-<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>
+<p class="text-sm-end">End aligned text on viewports sized SM (small) or wider.</p>
+<p class="text-md-end">End aligned text on viewports sized MD (medium) or wider.</p>
+<p class="text-lg-end">End aligned text on viewports sized LG (large) or wider.</p>
+<p class="text-xl-end">End aligned text on viewports sized XL (extra large) or wider.</p>
+<p class="text-xxl-end">End aligned text on viewports sized XXL (extra extra large) or wider.</p>
{{< /example >}}
{{< callout info >}}
@@ -123,7 +124,7 @@ Reset a text or link's color with `.text-reset`, so that it inherits the color f
{{< example >}}
<p class="text-body-secondary">
- Muted text with a <a href="#" class="text-reset">reset link</a>.
+ Secondary body text with a <a href="#" class="text-reset">reset link</a>.
</p>
{{< /example >}}