fix: various fixes to doc about button, button group, close button co…

…mponents

content/components/button-group/index.md

@@ -1,7 +1,7 @@
 ---
 layout: docs
 title: Button Group
-description: "Button group component is a grouping of buttons gives users access to frequently performed, related to each other actions."
+description: "Button group component is a grouping of buttons that gives users access to frequently performed, related actions."
 toc: true
 group: actions
 menu:
@@ -10,11 +10,11 @@ menu:
 
 **Bootstrap 5 Button group component**
 
-Responsive button group built with the latest Bootstrap 5. Button group component is a series of buttons together on a single line or stack them in a vertical column.
+Responsive button group built with the latest Bootstrap 5. Button group component is a series of buttons together on a single line or stacked together on a vertical column.
 
 ## Basic button group
 
-Button groups display multiple buttons with spaces between them out evenly. Just wrap a series of buttons with `.btn` in `.btn-group`. 
+Button groups display multiple buttons with evenly distributed spaces between them. Just wrap a series of buttons with `.btn` in `.btn-group`. 
 
 {{< example >}}
 <div class="btn-group" role="group" aria-label="Basic example">
@@ -49,7 +49,7 @@ In addition, groups and toolbars should be given an explicit label, as most assi
 
 <span class="lozenge new fs-sm">New Feature</span>
 
-Add a `.btn-group-narrow` to sets of two or more buttons into a one group. The spacing will be compacted between each of group button without no spacing.
+Add a `.btn-group-narrow` to sets of two or more buttons into a group. The spacing between buttons within the group will be removed.
 
 {{< example >}}
 <div class="btn-group btn-group-narrow" role="group" aria-label="Basic example">
@@ -60,7 +60,7 @@ Add a `.btn-group-narrow` to sets of two or more buttons into a one group. The s
 </div>
 {{</ example >}}
 
-The Segmented buttons have 2 types of segmented buttons: `Single-select` and `Multi-select`.
+There are 2 types of segmented buttons: `Single-select` and `Multi-select`.
 
 ### Single-select
 
@@ -99,7 +99,7 @@ Use a multi-select segmented button with [Checkbox toggle button]({{< docsref "c
 
 ### With outlined styles 
 
-Use `.btn-outline-*` to remove all background images, shows colors only for the border of the element.
+Use `.btn-outline-*` to remove all background images and show colors only for the border of the element.
 
 {{< example class="d-grid justify-content-start gap-4" >}}
 <div class="btn-group btn-group-narrow" role="group" aria-label="Basic example">
@@ -166,7 +166,7 @@ Combine sets of button groups into button toolbars for more complex components.
 </div>
 {{</ example >}}
 
-Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities though to space things properly.
+Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities to space things properly.
 
 {{< example class="d-grid gap-3" >}}
 <div class="btn-toolbar" role="toolbar">
@@ -248,7 +248,7 @@ Use the `.btn-{color}` to control the appearance of the button in the button gro
 {{</ example >}}
 
 
-## Vertical stacked group
+## Vertically stacked group
 
 Use the `.btn-group-vertical` to make a set of buttons appear vertically stacked rather than horizontally. 
 
@@ -262,7 +262,7 @@ Use the `.btn-group-vertical` to make a set of buttons appear vertically stacked
 </div>
 {{</ example >}}
 
-You also can nesting the dropdown
+You can also nest dropdown elements inside button groups.
 
 {{< example >}}
 <div class="btn-group-vertical" role="group" aria-label="Vertical button group">

content/components/button/index.md

@@ -93,12 +93,12 @@ A warning button appears before we request the user to take action, usually in a
 <button type="button" class="btn btn-warning active">Selected</button>
 {{</ example >}}
 
-### Danager button
+### Danger button
 
 The danger button appears as a final confirmation for a destructive action such as deleting. These are found mostly in confirmation modals. Just add `.btn-danger`.
 
 {{< example class="d-flex align-items-start gap-2 flex-wrap" >}}
-<button type="button" class="btn btn-danger">Danager button</button>
+<button type="button" class="btn btn-danger">Danger button</button>
 <button type="button" class="btn btn-danger" disabled>Disabled</button>
 <button type="button" class="btn btn-danger active">Selected</button>
 {{</ example >}}
@@ -140,7 +140,7 @@ Use `.btn-outline-default` for the standard button.
 
 ### More outline buttons
 
-The below outline buttons that used by Bootstrap by add `.btn-outline-*`.
+You can use the below outline buttons provided by Bootstrap by adding `.btn-outline-*`.
 
 {{< example class="d-flex align-items-start gap-2 flex-wrap" >}}
 <button type="button" class="btn btn-outline-primary">Primary</button>
@@ -157,7 +157,7 @@ The below outline buttons that used by Bootstrap by add `.btn-outline-*`.
 
 ### Disabled state
 
-Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element. Disabled buttons have `pointer-events: none` applied to, preventing hover and active states from triggering.
+Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element. Disabled buttons have `pointer-events: none` applied to them, preventing hover and active states from triggering.
 
 {{< example class="d-flex align-items-start gap-2 flex-wrap" >}}
 <button type="button" class="btn btn-primary" disabled>Disabled button</button>
@@ -325,7 +325,7 @@ If you don’t want the button text to wrap, you can add the [`.text-nowrap`]({{
 
 ## Social buttons
 
-Combining our icons and custom colors you can create social buttons. Combining our icons and custom colors you can create social buttons. 
+Combining our icons and custom colors you can create social buttons.
 
 {{< example >}}
 <a class="btn btn-primary border-0" style="background-color: #3b5998;" href="#" role="button">
@@ -348,7 +348,7 @@ Combining our icons and custom colors you can create social buttons. Combining o
 </a>
 {{</ example >}}
 
-You also can be changed by modifying a local CSS custom property `--bs-btn-bg`,`--bs-btn-hover-bg` and `--bs-btn-active-bg`. 
+You can also change a button's background color by modifying the custom local CSS properties `--bs-btn-bg`,`--bs-btn-hover-bg` and `--bs-btn-active-bg`. 
 See the [Bootstrap button variables](https://getbootstrap.com/docs/5.2/components/buttons/#variables).
 
 {{< example >}}

content/components/close-button/index.md

@@ -10,7 +10,7 @@ menu:
 
 **Bootstrap 5 Close button component**
 
-Close button built with the latest Bootstrap 5. The close button component used for dismissing content like modals and alerts.
+Close button built with the latest Bootstrap 5. The close button component is used for dismissing content like modals and alerts.
 
 ## Close button
 
@@ -22,7 +22,7 @@ Provide an option to dismiss or close a component with `.btn-close`. Default sty
 
 ## Disabled state
 
-To disabled a close buttons by add the `disabled` attribute. We’ve also applied `pointer-events: none` and `user-select: none` to preventing hover and active states from triggering.
+You can disable a close button by adding the `disabled` attribute. We’ve also applied `pointer-events: none` and `user-select: none` to prevent hover and active states from being triggered.
 
 {{< example >}}
 <button type="button" class="btn-close" disabled aria-label="Close"></button>
@@ -38,7 +38,7 @@ Use the `.btn-close-sm` for the smaller close button.
 <button type="button" class="btn-close btn-close-sm" aria-label="Close"></button>
 {{</ example >}}
 
-Or sets CSS variables: `--bs-btn-close-width` and `--bs-btn-close-height` to customize sizes.
+Or set the `--bs-btn-close-width` and `--bs-btn-close-height` CSS variables to desired values for custom sizing.
 
 {{< example >}}
 <button type="button" class="btn-close" aria-label="Close"