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
{{}} -## 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 `, ``, and ``—with `.table-group-divider`. +Add a thicker, darker border between table groups—``, ``, and ``—with `.table-group-divider`. {{< example >}}
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—`
@@ -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
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
{{}} @@ -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