fix: various fixes to docs for components in 'data-display' category

fastbootstrap · Dec 12, 2023 · 6c87fe1 · 6c87fe1
1 parent 0b113ee
commit 6c87fe1
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 42 deletions.
diff --git 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 >}}
 <div class="avatar-stack">
@@ -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
 </div>
 {{</ 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>}}
 <div class="avatar-group">

diff --git 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 `<img>` elements to make it an avatar.
+Add `.avatar` to any `<img>` element to make it an avatar.
 
 {{< example class="d-flex gap-4" >}}
 <img class="avatar" src="/images/avatar/1.jpg" />

diff --git 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 >}}
 <span class="badge text-bg-primary">Primary</span>

diff --git a/content/components/table/index.md b/content/components/table/index.md
@@ -16,7 +16,7 @@ Due to the widespread use of `<table>` elements across third-party widgets like
 
 ## Basic example
 
-Add the base class `.table` to any `<table>`, then extend with our optional modifier classes or custom styles. 
+Add the base class `.table` to any `<table>`, then extend it with our optional modifier classes or with custom styles. 
 
 {{< example >}}
 <table class="table">
@@ -160,7 +160,7 @@ Add the base class `.table` to any `<table>`, then extend with our optional modi
       <th scope="row">Percentage change</th>
       <td>
         <span class="text-danger">
-          <i class="fas fa-caret-down me-1"></i><span>-48.8%%</span>
+          <i class="fas fa-caret-down me-1"></i><span>-48.8%</span>
         </span>
       </td>
       <td>
@@ -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—`<thead>`, `<tbody>`, and `<tfoot>`—with `.table-group-divider`.
+Add a thicker, darker border between table groups—`<thead>`, `<tbody>`, and `<tfoot>`—with `.table-group-divider`.
 
 {{< example >}}
 <table class="table">
@@ -587,7 +587,7 @@ Add a thicker border, darker between table groups—`<thead>`, `<tbody>`, and `<
 
 ## Vertical alignment
 
-Table cells of `<thead>` are always vertical aligned to the bottom. Table cells in `<tbody>` inherit their alignment from `<table>` and are aligned to the top by default. 
+Table cells in `<thead>` are always vertically aligned to the bottom. Table cells in `<tbody>` inherit their alignment from `<table>` 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 `<tr>`s as direct children of a table, those `<tr>` will be wrapped in a `<tbody>` by default, thus making our selectors work as intended.
+Note that if you add `<tr>`s as direct children of a table, those `<tr>`s will be wrapped in a `<tbody>` by default, thus making our selectors work as intended.
 
 ## Anatomy 
 
@@ -818,33 +818,33 @@ A `<caption>` functions like a heading for a table. It helps users with screen r
 {{< example >}}
 <table class="table">
     <caption>List of users</caption>
-      <thead>
-        <tr>
-          <th scope="col">#</th>
-          <th scope="col">First</th>
-          <th scope="col">Last</th>
-          <th scope="col">Handle</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <th scope="row">1</th>
-          <td>Mark</td>
-          <td>Otto</td>
-          <td>@mdo</td>
-        </tr>
-        <tr>
-          <th scope="row">2</th>
-          <td>Jacob</td>
-          <td>Thornton</td>
-          <td>@fat</td>
-        </tr>
-        <tr>
-          <th scope="row">3</th>
-          <td colspan="2">Larry the Bird</td>
-          <td>@twitter</td>
-        </tr>
-      </tbody>
+    <thead>
+      <tr>
+        <th scope="col">#</th>
+        <th scope="col">First</th>
+        <th scope="col">Last</th>
+        <th scope="col">Handle</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th scope="row">1</th>
+        <td>Mark</td>
+        <td>Otto</td>
+        <td>@mdo</td>
+      </tr>
+      <tr>
+        <th scope="row">2</th>
+        <td>Jacob</td>
+        <td>Thornton</td>
+        <td>@fat</td>
+      </tr>
+      <tr>
+        <th scope="row">3</th>
+        <td colspan="2">Larry the Bird</td>
+        <td>@twitter</td>
+      </tr>
+    </tbody>
   </table>
   {{</ example >}}
 
@@ -885,7 +885,7 @@ You can also put the `<caption>` 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