From 5e854ab69233894125fc0271abaa9281e5b625d0 Mon Sep 17 00:00:00 2001
From: Marc Wrobel <marc.wrobel@gmail.com>
Date: Mon, 18 Jul 2022 09:30:35 +0200
Subject: [PATCH] Fix various small typos in documentation (#36762)

---
 site/content/docs/5.2/about/translations.md         | 2 +-
 site/content/docs/5.2/content/reboot.md             | 2 +-
 site/content/docs/5.2/customize/css-variables.md    | 2 +-
 site/content/docs/5.2/extend/approach.md            | 2 +-
 site/content/docs/5.2/getting-started/contribute.md | 2 +-
 site/content/docs/5.2/getting-started/parcel.md     | 4 ++--
 site/content/docs/5.2/getting-started/rtl.md        | 2 +-
 site/content/docs/5.2/getting-started/vite.md       | 2 +-
 site/content/docs/5.2/getting-started/webpack.md    | 4 ++--
 site/content/docs/5.2/layout/columns.md             | 2 +-
 site/content/docs/5.2/layout/grid.md                | 4 ++--
 site/layouts/shortcodes/example.html                | 2 +-
 12 files changed, 15 insertions(+), 15 deletions(-)
diff --git a/site/content/docs/5.2/about/translations.md b/site/content/docs/5.2/about/translations.md
index e719e3a842c2..5e2ae30c52ca 100644
--- a/site/content/docs/5.2/about/translations.md
+++ b/site/content/docs/5.2/about/translations.md
@@ -5,7 +5,7 @@ description: Links to community-translated Bootstrap documentation sites.
 group: about
 ---
 
-Community members have translated Bootstrap's documentation into various languages. None are officially supported and they may not always be up to date.
+Community members have translated Bootstrap's documentation into various languages. None are officially supported and they may not always be up-to-date.
 
 {{< translations.inline >}}
 <ul>
diff --git a/site/content/docs/5.2/content/reboot.md b/site/content/docs/5.2/content/reboot.md
index 8790d13c404e..ca667b2cecab 100644
--- a/site/content/docs/5.2/content/reboot.md
+++ b/site/content/docs/5.2/content/reboot.md
@@ -76,7 +76,7 @@ $font-family-sans-serif:
   "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 ```
 
-Note that because the font stack includes emoji fonts, many common symbol/dingbat Unicode characters will be rendered as multi-colored pictographs. Their appearance will vary, depending on the style used in the browser/platform's native emoji font, and they won't be affected by any CSS `color` styles.
+Note that because the font stack includes emoji fonts, many common symbol/dingbat Unicode characters will be rendered as multicolored pictographs. Their appearance will vary, depending on the style used in the browser/platform's native emoji font, and they won't be affected by any CSS `color` styles.
 
 This `font-family` is applied to the `<body>` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `$font-family-base` and recompile Bootstrap.
 
diff --git a/site/content/docs/5.2/customize/css-variables.md b/site/content/docs/5.2/customize/css-variables.md
index 13142f6ad775..26d167525d36 100644
--- a/site/content/docs/5.2/customize/css-variables.md
+++ b/site/content/docs/5.2/customize/css-variables.md
@@ -57,4 +57,4 @@ a {
 
 ## Grid breakpoints
 
-While we include our grid breakpoints as CSS variables (except for `xs`), be aware that **CSS variables do not work in media queries**. This is by design in the CSS spec for variables, but may change in coming years with support for `env()` variables. Check out [this Stack Overflow answer](https://stackoverflow.com/a/47212942) for some helpful links. In the mean time, you can use these variables in other CSS situations, as well as in your JavaScript.
+While we include our grid breakpoints as CSS variables (except for `xs`), be aware that **CSS variables do not work in media queries**. This is by design in the CSS spec for variables, but may change in coming years with support for `env()` variables. Check out [this Stack Overflow answer](https://stackoverflow.com/a/47212942) for some helpful links. In the meantime, you can use these variables in other CSS situations, as well as in your JavaScript.
diff --git a/site/content/docs/5.2/extend/approach.md b/site/content/docs/5.2/extend/approach.md
index 8dbd16fc392b..3b8deeff23e8 100644
--- a/site/content/docs/5.2/extend/approach.md
+++ b/site/content/docs/5.2/extend/approach.md
@@ -69,7 +69,7 @@ The same goes for more complex components. While we *could* write our own form v
 
 ## Utilities
 
-Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combatting CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., `.d-block` represents `display: block;`). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.
+Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combating CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., `.d-block` represents `display: block;`). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.
 
 Specifically regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.
 
diff --git a/site/content/docs/5.2/getting-started/contribute.md b/site/content/docs/5.2/getting-started/contribute.md
index 6734587935a8..6b3de43b6668 100644
--- a/site/content/docs/5.2/getting-started/contribute.md
+++ b/site/content/docs/5.2/getting-started/contribute.md
@@ -50,7 +50,7 @@ We maintain the list of browsers supported through Autoprefixer in a separate fi
 
 ## RTLCSS
 
-Bootstrap uses [RTLCSS](https://rtlcss.com/) to process compiled CSS and convert them to RTL – basically replacing horizontal direction aware properties (eg. `padding-left`) with their opposite. It allows us only write our CSS a single time and make minor tweaks using RTLCSS [control](https://rtlcss.com/learn/usage-guide/control-directives/) and [value](https://rtlcss.com/learn/usage-guide/value-directives/) directives.
+Bootstrap uses [RTLCSS](https://rtlcss.com/) to process compiled CSS and convert them to RTL – basically replacing horizontal direction aware properties (e.g. `padding-left`) with their opposite. It allows us only write our CSS a single time and make minor tweaks using RTLCSS [control](https://rtlcss.com/learn/usage-guide/control-directives/) and [value](https://rtlcss.com/learn/usage-guide/value-directives/) directives.
 
 ## Local documentation
 
diff --git a/site/content/docs/5.2/getting-started/parcel.md b/site/content/docs/5.2/getting-started/parcel.md
index 9b93eef9ce2b..674a39837bcd 100644
--- a/site/content/docs/5.2/getting-started/parcel.md
+++ b/site/content/docs/5.2/getting-started/parcel.md
@@ -66,7 +66,7 @@ At this point, everything is in the right place, but Parcel needs an HTML page a
 
 With dependencies installed and our project folder ready for us to start coding, we can now configure Parcel and run our project locally. Parcel itself requires no configuration file by design, but we do need an npm script and an HTML file to start our server.
 
-1. **Fill in the `src/index.html` file.** Parcel needs a page to render, so we use our `index.html` page to setup some basic HTML, including our CSS and JavaScript files.
+1. **Fill in the `src/index.html` file.** Parcel needs a page to render, so we use our `index.html` page to set up some basic HTML, including our CSS and JavaScript files.
 
    ```html
    <!doctype html>
@@ -151,7 +151,7 @@ Importing Bootstrap into Parcel requires two imports, one into our `styles.scss`
 
    <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/parcel-dev-server-bootstrap.png" alt="Parcel dev server running with Bootstrap">
 
-   Now you can start adding any Bootstrap components you want to use. Be sure to [checkout the complete Parcel example project](https://github.com/twbs/examples/tree/main/parcel) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need.
+   Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete Parcel example project](https://github.com/twbs/examples/tree/main/parcel) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need.
 
 {{< markdown >}}
 {{< partial "guide-footer.md" >}}
diff --git a/site/content/docs/5.2/getting-started/rtl.md b/site/content/docs/5.2/getting-started/rtl.md
index 19d9d4141c1f..19d33ffb47fa 100644
--- a/site/content/docs/5.2/getting-started/rtl.md
+++ b/site/content/docs/5.2/getting-started/rtl.md
@@ -174,7 +174,7 @@ While this approach is understandable, please pay attention to the following:
 
 ## The breadcrumb case
 
-The [breadcrumb separator]({{< docsref "/components/breadcrumb" >}}/#changing-the-separator) is the only case requiring its own brand new variable— namely `$breadcrumb-divider-flipped` —defaulting to `$breadcrumb-divider`.
+The [breadcrumb separator]({{< docsref "/components/breadcrumb" >}}/#changing-the-separator) is the only case requiring its own brand-new variable— namely `$breadcrumb-divider-flipped` —defaulting to `$breadcrumb-divider`.
 
 ## Additional resources
 
diff --git a/site/content/docs/5.2/getting-started/vite.md b/site/content/docs/5.2/getting-started/vite.md
index ca0b61925ec6..ca71bbe31d5c 100644
--- a/site/content/docs/5.2/getting-started/vite.md
+++ b/site/content/docs/5.2/getting-started/vite.md
@@ -190,7 +190,7 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s
 
    <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/vite-dev-server-bootstrap.png" alt="Vite dev server running with Bootstrap">
 
-   Now you can start adding any Bootstrap components you want to use. Be sure to [checkout the complete Vite example project](https://github.com/twbs/examples/tree/main/vite) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need.
+   Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete Vite example project](https://github.com/twbs/examples/tree/main/vite) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need.
 
 {{< markdown >}}
 {{< partial "guide-footer.md" >}}
diff --git a/site/content/docs/5.2/getting-started/webpack.md b/site/content/docs/5.2/getting-started/webpack.md
index e45df81e5d1b..e314ecf6a2a9 100644
--- a/site/content/docs/5.2/getting-started/webpack.md
+++ b/site/content/docs/5.2/getting-started/webpack.md
@@ -136,7 +136,7 @@ With dependencies installed and our project folder ready for us to start coding,
 
    <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/webpack-dev-server.png" alt="Webpack dev server running">
 
-In the next and final section to this guide, we'll setup the Webpack loaders and import all of Bootstrap's CSS and JavaScript.
+In the next and final section to this guide, we'll set up the Webpack loaders and import all of Bootstrap's CSS and JavaScript.
 
 ## Import Bootstrap
 
@@ -227,7 +227,7 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first
 
    <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/webpack-dev-server-bootstrap.png" alt="Webpack dev server running with Bootstrap">
 
-   Now you can start adding any Bootstrap components you want to use. Be sure to [checkout the complete Webpack example project](https://github.com/twbs/examples/tree/main/webpack) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need.
+   Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete Webpack example project](https://github.com/twbs/examples/tree/main/webpack) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need.
 
 {{< markdown >}}
 {{< partial "guide-footer.md" >}}
diff --git a/site/content/docs/5.2/layout/columns.md b/site/content/docs/5.2/layout/columns.md
index 2ebf96ea2513..e2dbd3f1769f 100644
--- a/site/content/docs/5.2/layout/columns.md
+++ b/site/content/docs/5.2/layout/columns.md
@@ -285,7 +285,7 @@ With the move to flexbox in v4, you can use margin utilities like `.me-auto` to
 
 ## Standalone column classes
 
-The `.col-*` classes can also be used outside a `.row` to give an element a specific width. Whenever column classes are used as non direct children of a row, the paddings are omitted.
+The `.col-*` classes can also be used outside a `.row` to give an element a specific width. Whenever column classes are used as non-direct children of a row, the paddings are omitted.
 
 {{< example >}}
 <div class="col-3 bg-light p-3 border">
diff --git a/site/content/docs/5.2/layout/grid.md b/site/content/docs/5.2/layout/grid.md
index 9d147239fec6..44465e9071c0 100644
--- a/site/content/docs/5.2/layout/grid.md
+++ b/site/content/docs/5.2/layout/grid.md
@@ -52,7 +52,7 @@ Be aware of the limitations and [bugs around flexbox](https://github.com/philipw
 
 ## Grid options
 
-Bootstrap's grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follow:
+Bootstrap's grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follows:
 
 - Extra small (xs)
 - Small (sm)
@@ -525,4 +525,4 @@ $container-max-widths: (
 );
 ```
 
-When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in `px` (not `rem`, `em`, or `%`).
+When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will output a brand-new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in `px` (not `rem`, `em`, or `%`).
diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html
index 3cbbd9fca9b7..c6dcddbe0d48 100644
--- a/site/layouts/shortcodes/example.html
+++ b/site/layouts/shortcodes/example.html
@@ -7,7 +7,7 @@
     * lang: language used to display the code - default: "html"
     * show_markup: if the markup should be output in the HTML - default: `true`
     * show_preview: if the preview should be output in the HTML - default: `true`
-    * stackblitz_add_js: if extra JS snippet shoud le added to StackBlitz - default: `false`
+    * stackblitz_add_js: if extra JS snippet should be added to StackBlitz - default: `false`
 */ -}}
 
 {{- $id := .Get "id" -}}
