diff --git a/content/components/avatar-group/index.md b/content/components/avatar-group/index.md
index 658a872..954375e 100644
--- a/content/components/avatar-group/index.md
+++ b/content/components/avatar-group/index.md
@@ -13,9 +13,9 @@ menu:
Responsive Avatar group built with the latest Bootstrap 5. Avatar group component displays a number of avatars grouped together in a stack.
-## Stacked avatar
+## Stacked avatars
-Include multiple avatars in stacked.
+Stack multiple avatars together. Notice the small overlap between avatars in the example below.
{{< example >}}
@@ -30,7 +30,7 @@ Include multiple avatars in stacked.
## Border color
-The color of the border around the avatar. Any color that the CSS border-color property accepts can be used.
+Customize the color of the border around the avatar. Any color that the CSS border-color property accepts can be used.
{{< example >}}
@@ -43,7 +43,9 @@ The color of the border around the avatar. Any color that the CSS border-color p
{{ example >}}
-## Grouped avatar
+## Grouped avatars
+
+Avatars can also be grouped together, rather than stacked. Notice the absence of overlap between avatars in the example below (compared to earlier examples of stacked avatars).
{{< example>}}
diff --git a/content/components/avatar/index.md b/content/components/avatar/index.md
index f4da9f4..f74c12b 100644
--- a/content/components/avatar/index.md
+++ b/content/components/avatar/index.md
@@ -15,7 +15,7 @@ Responsive avatar built with the latest Bootstrap 5. Avatar component is a visua
## Avatar examples
-Add `.avatar` to any `
` elements to make it an avatar.
+Add `.avatar` to any `
` element to make it an avatar.
{{< example class="d-flex gap-4" >}}
diff --git a/content/components/badge/index.md b/content/components/badge/index.md
index dcb3798..458159f 100644
--- a/content/components/badge/index.md
+++ b/content/components/badge/index.md
@@ -1,7 +1,7 @@
---
layout: docs
title: Badge
-description: "Badges are used to inform merchants of the status of an object or of an action that’s been taken."
+description: "Badges are used to inform users of the status of an object or of an action that’s been taken."
toc: true
group: data-display
menu:
@@ -10,9 +10,9 @@ menu:
**Bootstrap 5 Badge component**
-Responsive badge built with the latest Bootstrap 5. Badge component is a visual indicator for numeric values such as tallies and scores.
+Responsive badge built with the latest Bootstrap 5. The badge component is a visual indicator for values such as tallies and scores.
-Badges are usually placed before or after the label of the thing they're quantifying, such as the number of votes for an issue.
+Badges are usually placed before or after the label of the thing they're quantifying or referencing, such as the number of votes for an issue.
## Badge examples
@@ -84,7 +84,7 @@ You can also replace the `.badge` class with a few more utilities without a coun
## Background colors
-Set a background-color with contrasting foreground color with our [.text-bg-{color}]({{< docsref "background-color" >}}) helpers. Previously it was required to manually pair your choice of [.text-{color}]({{< docsref "text-color" >}}) and [.bg-{color}]({{< docsref "background-color" >}}) utilities for styling, which you still may use if you prefer.
+Set a background-color with contrasting foreground color with our [.text-bg-{color}]({{< docsref "background-color" >}}) helpers. Previously, it was required to manually pair your choice of [.text-{color}]({{< docsref "text-color" >}}) and [.bg-{color}]({{< docsref "background-color" >}}) utilities for styling, which you still may use if you prefer.
{{< example >}}
Primary
diff --git a/content/components/table/index.md b/content/components/table/index.md
index 4236650..2509276 100644
--- a/content/components/table/index.md
+++ b/content/components/table/index.md
@@ -16,7 +16,7 @@ Due to the widespread use of `
` elements across third-party widgets like
## Basic example
-Add the base class `.table` to any ``, then extend with our optional modifier classes or custom styles.
+Add the base class `.table` to any ``, then extend it with our optional modifier classes or with custom styles.
{{< example >}}
@@ -160,7 +160,7 @@ Add the base class `.table` to any ``, then extend with our optional modi
Percentage change |
- -48.8%%
+ -48.8%
|
@@ -548,7 +548,7 @@ Add `.table-sm` to make any `.table` more compact by cutting all cell padding in
## Group dividers
-Add a thicker border, darker between table groups—``, ` | `, and ``—with `.table-group-divider`.
+Add a thicker, darker border between table groups—``, ``, and ``—with `.table-group-divider`.
{{< example >}}
@@ -587,7 +587,7 @@ Add a thicker border, darker between table groups—``, ``, and `<
## Vertical alignment
-Table cells of `` are always vertical aligned to the bottom. Table cells in `` inherit their alignment from `` and are aligned to the top by default.
+Table cells in `` are always vertically aligned to the bottom. Table cells in `` inherit their alignment from `` and are aligned to the top by default.
Use the vertical align classes to re-align where needed.
@@ -693,7 +693,7 @@ Border styles, active styles, and table variants are not inherited by nested tab
To prevent _any_ styles from leaking to nested tables, we use the child combinator (`>`) selector in our CSS. Since we need to target all the `td`s and `th`s in the `thead`, `tbody`, and `tfoot`, our selector would look pretty long without it. As such, we use the rather odd looking `.table > :not(caption) > * > *` selector to target all `td`s and `th`s of the `.table`, but none of any potential nested tables.
-Note that if you add ``s as direct children of a table, those `
` will be wrapped in a `
` by default, thus making our selectors work as intended.
+Note that if you add ``s as direct children of a table, those `
`s will be wrapped in a `
` by default, thus making our selectors work as intended.
## Anatomy
@@ -818,33 +818,33 @@ A `` functions like a heading for a table. It helps users with screen r
{{< example >}}
List of users
-
-
- # |
- First |
- Last |
- Handle |
-
-
-
-
- 1 |
- Mark |
- Otto |
- @mdo |
-
-
- 2 |
- Jacob |
- Thornton |
- @fat |
-
-
- 3 |
- Larry the Bird |
- @twitter |
-
-
+
+
+ # |
+ First |
+ Last |
+ Handle |
+
+
+
+
+ 1 |
+ Mark |
+ Otto |
+ @mdo |
+
+
+ 2 |
+ Jacob |
+ Thornton |
+ @fat |
+
+
+ 3 |
+ Larry the Bird |
+ @twitter |
+
+
{{ example >}}
@@ -885,7 +885,7 @@ You can also put the `` on the top of the table with `.caption-top`.
## Responsive tables
-Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl|-xxl}`.
+Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint to have a responsive table up to that breakpoint by using `.table-responsive{-sm|-md|-lg|-xl|-xxl}`.
{{< callout warning >}}
##### Vertical clipping/truncation