13 files changed, 101 insertions, 122 deletions
diff --git a/site/content/docs/5.2/getting-started/accessibility.md b/site/content/docs/5.3/getting-started/accessibility.md
index e9f1cb3..e9f1cb3 100644
--- a/site/content/docs/5.2/getting-started/accessibility.md
+++ b/site/content/docs/5.3/getting-started/accessibility.md
diff --git a/site/content/docs/5.2/getting-started/best-practices.md b/site/content/docs/5.3/getting-started/best-practices.md
index 449d02a..449d02a 100644
--- a/site/content/docs/5.2/getting-started/best-practices.md
+++ b/site/content/docs/5.3/getting-started/best-practices.md
diff --git a/site/content/docs/5.2/getting-started/browsers-devices.md b/site/content/docs/5.3/getting-started/browsers-devices.md
index dc550ec..f75fed8 100644
--- a/site/content/docs/5.2/getting-started/browsers-devices.md
+++ b/site/content/docs/5.3/getting-started/browsers-devices.md
@@ -29,8 +29,8 @@ Generally speaking, Bootstrap supports the latest versions of each major platfor
 {{< bs-table "table" >}}
 | | Chrome | Firefox | Safari | Android Browser &amp; WebView |
 | --- | --- | --- | --- | --- |
-| **Android** | Supported | Supported | <span class="text-muted">&mdash;</span> | v6.0+ |
-| **iOS** | Supported | Supported | Supported | <span class="text-muted">&mdash;</span> |
+| **Android** | Supported | Supported | <span class="text-body-secondary">&mdash;</span> | v6.0+ |
+| **iOS** | Supported | Supported | Supported | <span class="text-body-secondary">&mdash;</span> |
 {{< /bs-table >}}
 
 ### Desktop browsers
@@ -41,7 +41,7 @@ Similarly, the latest versions of most desktop browsers are supported.
 | | Chrome | Firefox | Microsoft Edge | Opera | Safari |
 | --- | --- | --- | --- | --- | --- |
 | **Mac** | Supported | Supported | Supported | Supported | Supported |
-| **Windows** | Supported | Supported | Supported | Supported | <span class="text-muted">&mdash;</span> |
+| **Windows** | Supported | Supported | Supported | Supported | <span class="text-body-secondary">&mdash;</span> |
 {{< /bs-table >}}
 
 For Firefox, in addition to the latest normal stable release, we also support the latest [Extended Support Release (ESR)](https://www.mozilla.org/en-US/firefox/enterprise/) version of Firefox.
diff --git a/site/content/docs/5.2/getting-started/contents.md b/site/content/docs/5.3/getting-started/contents.md
index 88632b6..88632b6 100644
--- a/site/content/docs/5.2/getting-started/contents.md
+++ b/site/content/docs/5.3/getting-started/contents.md
diff --git a/site/content/docs/5.2/getting-started/contribute.md b/site/content/docs/5.3/getting-started/contribute.md
index 6b3de43..4d6d405 100644
--- a/site/content/docs/5.2/getting-started/contribute.md
+++ b/site/content/docs/5.3/getting-started/contribute.md
@@ -4,7 +4,7 @@ title: Contribute
 description: Help develop Bootstrap with our documentation build scripts and tests.
 group: getting-started
 toc: true
-aliases: "/docs/5.2/getting-started/build-tools/"
+aliases: "/docs/5.3/getting-started/build-tools/"
 ---
 
 ## Tooling setup
@@ -14,7 +14,7 @@ Bootstrap uses [npm scripts](https://docs.npmjs.com/misc/scripts/) to build the
 To use our build system and run our documentation locally, you'll need a copy of Bootstrap's source files and Node. Follow these steps and you should be ready to rock:
 
 1. [Download and install Node.js](https://nodejs.org/en/download/), which we use to manage our dependencies.
-2. Either [download Bootstrap's sources]({{< param "download.source" >}}) or fork [Bootstrap's repository]({{< param repo >}}).
+2. Either [download Bootstrap's sources]({{< param "download.source" >}}) or fork and clone [Bootstrap's repository]({{< param repo >}}).
 3. Navigate to the root `/bootstrap` directory and run `npm install` to install our local dependencies listed in [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/package.json).
 
 When completed, you'll be able to run the various commands provided from the command line.
@@ -33,7 +33,7 @@ Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/packag
 {{< /bs-table >}}
 
 {{< callout info >}}
-{{< partial "callout-info-npm-starter.md" >}}
+{{< partial "callouts/info-npm-starter.md" >}}
 {{< /callout >}}
 
 ## Sass
diff --git a/site/content/docs/5.2/getting-started/download.md b/site/content/docs/5.3/getting-started/download.md
index b06c055..a1b8bfd 100644
--- a/site/content/docs/5.2/getting-started/download.md
+++ b/site/content/docs/5.3/getting-started/download.md
@@ -71,7 +71,7 @@ Bootstrap's `package.json` contains some additional metadata under the following
 - `style` - path to Bootstrap's non-minified CSS that's been compiled using the default settings (no customization)
 
 {{< callout info >}}
-{{< partial "callout-info-npm-starter.md" >}}
+{{< partial "callouts/info-npm-starter.md" >}}
 {{< /callout >}}
 
 ### yarn
@@ -96,7 +96,7 @@ Alternatively, if you're not using Bundler, you can install the gem by running t
 gem install bootstrap -v {{< param current_ruby_version >}}
 ```
 
-[See the gem's README](https://github.com/twbs/bootstrap-rubygem/blob/master/README.md) for further details.
+[See the gem's README](https://github.com/twbs/bootstrap-rubygem/blob/main/README.md) for further details.
 
 ### Composer
 
diff --git a/site/content/docs/5.2/getting-started/introduction.md b/site/content/docs/5.3/getting-started/introduction.md
index f0072bf..d296d18 100644
--- a/site/content/docs/5.2/getting-started/introduction.md
+++ b/site/content/docs/5.3/getting-started/introduction.md
@@ -4,7 +4,7 @@ title: Get started with Bootstrap
 description: Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.
 group: getting-started
 aliases:
-  - "/docs/5.2/getting-started/"
+  - "/docs/5.3/getting-started/"
   - "/docs/getting-started/"
   - "/getting-started/"
 toc: true
@@ -87,7 +87,7 @@ You can also use the CDN to fetch any of our [additional builds listed in the Co
 Curious which components explicitly require our JavaScript and Popper? Click the show components link below. If you're at all unsure about the general page structure, keep reading for an example page template.
 
 <details>
-<summary class="text-primary mb-3">Show components requiring JavaScript</summary>
+<summary class="bd-summary-link mb-3">Show components requiring JavaScript</summary>
 {{< markdown >}}
 - Alerts for dismissing
 - Buttons for toggling states and checkbox/radio functionality
@@ -119,7 +119,7 @@ Bootstrap requires the use of the HTML5 doctype. Without it, you'll see some fun
 </html>
 ```
 
-### Responsive meta tag
+### Viewport meta
 
 Bootstrap is developed *mobile first*, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your `<head>`.
 
diff --git a/site/content/docs/5.2/getting-started/javascript.md b/site/content/docs/5.3/getting-started/javascript.md
index c4ba6b0..8efb2fb 100644
--- a/site/content/docs/5.2/getting-started/javascript.md
+++ b/site/content/docs/5.3/getting-started/javascript.md
@@ -19,6 +19,9 @@ While the Bootstrap CSS can be used with any framework, **the Bootstrap JavaScri
 A better alternative for those using this type of frameworks is to use a framework-specific package **instead of** the Bootstrap JavaScript. Here are some of the most popular options:
 
 - React: [React Bootstrap](https://react-bootstrap.github.io/)
+  {{< callout >}}
+  **Try it yourself!** Download the source code and working demo for using Bootstrap with React, Next.js, and React Bootstrap from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/react-nextjs). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/react-nextjs?file=src%2Fpages%2Findex.tsx).
+  {{< /callout >}}
 - Vue: [BootstrapVue](https://bootstrap-vue.org/) (currently only supports Vue 2 and Bootstrap 4)
 - Angular: [ng-bootstrap](https://ng-bootstrap.github.io/)
 
@@ -30,6 +33,7 @@ A better alternative for those using this type of frameworks is to use a framewo
 
 We provide a version of Bootstrap built as `ESM` (`bootstrap.esm.js` and `bootstrap.esm.min.js`) which allows you to use Bootstrap as a module in the browser, if your [targeted browsers support it](https://caniuse.com/es6-module).
 
+<!-- eslint-skip -->
 ```html
 <script type="module">
   import { Toast } from 'bootstrap.esm.min.js'
@@ -54,6 +58,7 @@ Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relativ
 
 To fix this, you can use an `importmap` to resolve the arbitrary module names to complete paths. If your [targeted browsers](https://caniuse.com/?search=importmap) do not support `importmap`, you'll need to use the [es-module-shims](https://github.com/guybedford/es-module-shims) project. Here's how it works for Bootstrap and Popper:
 
+<!-- eslint-skip -->
 ```html
 <!doctype html>
 <html lang="en">
@@ -65,13 +70,13 @@ To fix this, you can use an `importmap` to resolve the arbitrary module names to
   </head>
   <body>
     <h1>Hello, modularity!</h1>
-    <button id="popoverButton" type="button" class="btn btn-primary btn-lg" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button>
+    <button id="popoverButton" type="button" class="btn btn-primary btn-lg" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button>
 
     <script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js" crossorigin="anonymous"></script>
     <script type="importmap">
     {
       "imports": {
-        "@popperjs/core": "{{< param "cdn.popper" >}}",
+        "@popperjs/core": "{{< param "cdn.popper_esm" >}}",
         "bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@{{< param "current_version" >}}/dist/js/bootstrap.esm.min.js"
       }
     }
@@ -125,7 +130,6 @@ All constructors accept an optional options object or nothing (which initiates a
 
 ```js
 const myModalEl = document.querySelector('#myModal')
-
 const modal = new bootstrap.Modal(myModalEl) // initialized with defaults
 
 const configObject = { keyboard: false }
@@ -232,42 +236,7 @@ Tooltips and Popovers use our built-in sanitizer to sanitize options which accep
 
 The default `allowList` value is the following:
 
-```js
-const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
-const DefaultAllowlist = {
-  // Global attributes allowed on any supplied element below.
-  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
-  a: ['target', 'href', 'title', 'rel'],
-  area: [],
-  b: [],
-  br: [],
-  col: [],
-  code: [],
-  div: [],
-  em: [],
-  hr: [],
-  h1: [],
-  h2: [],
-  h3: [],
-  h4: [],
-  h5: [],
-  h6: [],
-  i: [],
-  img: ['src', 'srcset', 'alt', 'title', 'width', 'height'],
-  li: [],
-  ol: [],
-  p: [],
-  pre: [],
-  s: [],
-  small: [],
-  span: [],
-  sub: [],
-  sup: [],
-  strong: [],
-  u: [],
-  ul: []
-}
-```
+{{< js-docs name="allow-list" file="js/src/util/sanitizer.js" >}}
 
 If you want to add new values to this default `allowList` you can do the following:
 
@@ -302,11 +271,17 @@ const tooltip = new bootstrap.Tooltip(yourTooltipEl, {
 **You don't need jQuery in Bootstrap 5**, but it's still possible to use our components with jQuery. If Bootstrap detects `jQuery` in the `window` object, it'll add all of our components in jQuery's plugin system. This allows you to do the following:
 
 ```js
-$('[data-bs-toggle="tooltip"]').tooltip() // to enable tooltips, with default configuration
+// to enable tooltips with the default configuration
+$('[data-bs-toggle="tooltip"]').tooltip()
 
-$('[data-bs-toggle="tooltip"]').tooltip({ boundary: 'clippingParents', customClass: 'myClass' }) // to initialize tooltips with given configuration
+// to initialize tooltips with given configuration
+$('[data-bs-toggle="tooltip"]').tooltip({
+  boundary: 'clippingParents',
+  customClass: 'myClass'
+})
 
-$('#myTooltip').tooltip('show') // to trigger `show` method
+// to trigger the `show` method
+$('#myTooltip').tooltip('show')
 ```
 
 The same goes for our other components.
diff --git a/site/content/docs/5.2/getting-started/parcel.md b/site/content/docs/5.3/getting-started/parcel.md
index d28f923..36619e7 100644
--- a/site/content/docs/5.2/getting-started/parcel.md
+++ b/site/content/docs/5.3/getting-started/parcel.md
@@ -1,6 +1,6 @@
 ---
 layout: docs
-title: "Bootstrap & Parcel"
+title: Bootstrap and Parcel
 description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Parcel.
 group: getting-started
 toc: true
@@ -88,7 +88,7 @@ With dependencies installed and our project folder ready for us to start coding,
    </html>
    ```
 
-   We're including a little bit of Bootstrap styling here with the `div class="container"` and `<button>` so that we see when Bootstrap's CSS is loaded by Webpack.
+   We're including a little bit of Bootstrap styling here with the `div class="container"` and `<button>` so that we see when Bootstrap's CSS is loaded by Parcel.
 
    Parcel will automatically detect we're using Sass and install the [Sass Parcel plugin](https://parceljs.org/languages/sass/) to support it. However, if you wish, you can also manually run `npm i --save-dev @parcel/transformer-sass`.
 
@@ -123,7 +123,7 @@ Importing Bootstrap into Parcel requires two imports, one into our `styles.scss`
 
    ```scss
    // Import all of Bootstrap's CSS
-   @import "~bootstrap/scss/bootstrap";
+   @import "bootstrap/scss/bootstrap";
    ```
 
    *You can also import our stylesheets individually if you want. [Read our Sass import docs]({{< docsref "/customize/sass#importing" >}}) for details.*
diff --git a/site/content/docs/5.2/getting-started/rfs.md b/site/content/docs/5.3/getting-started/rfs.md
index 5aa6840..5aa6840 100644
--- a/site/content/docs/5.2/getting-started/rfs.md
+++ b/site/content/docs/5.3/getting-started/rfs.md
diff --git a/site/content/docs/5.2/getting-started/rtl.md b/site/content/docs/5.3/getting-started/rtl.md
index f4abf05..156f205 100644
--- a/site/content/docs/5.2/getting-started/rtl.md
+++ b/site/content/docs/5.3/getting-started/rtl.md
@@ -13,9 +13,7 @@ We recommend getting familiar with Bootstrap first by reading through our [Getti
 You may also want to read up on [the RTLCSS project](https://rtlcss.com/), as it powers our approach to RTL.
 
 {{< callout warning >}}
-### Experimental feature
-
-The RTL feature is still **experimental** and will probably evolve according to user feedback. Spotted something or have an improvement to suggest? [Open an issue]({{< param repo >}}/issues/new/choose), we'd love to get your insights.
+**Bootstrap's RTL feature is still experimental** and will evolve based on user feedback. Spotted something or have an improvement to suggest? [Open an issue]({{< param repo >}}/issues/new/choose), we'd love to get your insights.
 {{< /callout >}}
 
 ## Required HTML
@@ -163,9 +161,7 @@ Need both LTR and RTL on the same page? Thanks to [RTLCSS String Maps](https://r
 After running Sass then RTLCSS, each selector in your CSS files will be prepended by `.ltr`, and `.rtl` for RTL files. Now you're able to use both files on the same page, and simply use `.ltr` or `.rtl` on your components wrappers to use one or the other direction.
 
 {{< callout warning >}}
-#### Edge cases and known limitations
-
-While this approach is understandable, please pay attention to the following:
+**Edge cases and known limitations** to consider when working with a combined LTR and RTL implementation:
 
 1. When switching `.ltr` and `.rtl`, make sure you add `dir` and `lang` attributes accordingly.
 2. Loading both files can be a real performance bottleneck: consider some [optimization]({{< docsref "/customize/optimize" >}}), and maybe try to [load one of those files asynchronously](https://www.filamentgroup.com/lab/load-css-simpler/).
diff --git a/site/content/docs/5.2/getting-started/vite.md b/site/content/docs/5.3/getting-started/vite.md
index b203eef..9c2be9f 100644
--- a/site/content/docs/5.2/getting-started/vite.md
+++ b/site/content/docs/5.3/getting-started/vite.md
@@ -1,6 +1,6 @@
 ---
 layout: docs
-title: "Bootstrap & Vite"
+title: Bootstrap and Vite
 description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Vite.
 group: getting-started
 toc: true
@@ -35,6 +35,7 @@ We're building a Vite project with Bootstrap from scratch, so there are some pre
    ```sh
    npm i --save bootstrap @popperjs/core
    ```
+
 4. **Install additional dependency.** In addition to Vite and Bootstrap, we need another dependency (Sass) to properly import and bundle Bootstrap's CSS.
 
    ```sh
@@ -81,9 +82,11 @@ With dependencies installed and our project folder ready for us to start coding,
 
    export default {
      root: path.resolve(__dirname, 'src'),
+     build: {
+       outDir: '../dist'
+     },
      server: {
-       port: 8080,
-       hot: true
+       port: 8080
      }
    }
    ```
@@ -97,13 +100,13 @@ With dependencies installed and our project folder ready for us to start coding,
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap w/ Vite</title>
+       <script type="module" src="./js/main.js"></script>
      </head>
      <body>
        <div class="container py-4 px-3 mx-auto">
          <h1>Hello, Bootstrap and Vite!</h1>
          <button class="btn btn-primary">Primary button</button>
        </div>
-       <script type="module" src="./js/main.js"></script>
      </body>
    </html>
    ```
@@ -135,36 +138,16 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s
 
 ## Import Bootstrap
 
-1. **Set up Bootstrap's Sass import in `vite.config.js`.** Your configuration file is now complete and should match the snippet below. The only new part here is the `resolve` section—we use this to add an alias to our source files inside `node_modules` to keep imports as simple as possible.
-
-   <!-- eslint-skip -->
-   ```js
-   const path = require('path')
-
-   export default {
-     root: path.resolve(__dirname, 'src'),
-     resolve: {
-       alias: {
-         '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
-       }
-     },
-     server: {
-       port: 8080,
-       hot: true
-     }
-   }
-   ```
-
-2. **Now, let's import Bootstrap's CSS.** Add the following to `src/scss/styles.scss` to import all of Bootstrap's source Sass.
+1. **Import Bootstrap's CSS.** Add the following to `src/scss/styles.scss` to import all of Bootstrap's source Sass.
 
    ```scss
    // Import all of Bootstrap's CSS
-   @import "~bootstrap/scss/bootstrap";
+   @import "bootstrap/scss/bootstrap";
    ```
 
    *You can also import our stylesheets individually if you want. [Read our Sass import docs]({{< docsref "/customize/sass#importing" >}}) for details.*
 
-3. **Next we load the CSS and import Bootstrap's JavaScript.** Add the following to `src/js/main.js` to load the CSS and import all of Bootstrap's JS. Popper will be imported automatically through Bootstrap.
+2. **Next we load the CSS and import Bootstrap's JavaScript.** Add the following to `src/js/main.js` to load the CSS and import all of Bootstrap's JS. Popper will be imported automatically through Bootstrap.
 
    <!-- eslint-skip -->
    ```js
@@ -187,7 +170,7 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s
 
    *[Read our JavaScript docs]({{< docsref "/getting-started/javascript/" >}}) for more information on how to use Bootstrap's plugins.*
 
-4. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this.
+3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this.
 
    <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/vite-dev-server-bootstrap.png" alt="Vite dev server running with Bootstrap">
 
diff --git a/site/content/docs/5.2/getting-started/webpack.md b/site/content/docs/5.3/getting-started/webpack.md
index 870e070..bd539b8 100644
--- a/site/content/docs/5.2/getting-started/webpack.md
+++ b/site/content/docs/5.3/getting-started/webpack.md
@@ -1,6 +1,6 @@
 ---
 layout: docs
-title: "Bootstrap & Webpack"
+title: Bootstrap and Webpack
 description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Webpack.
 group: getting-started
 toc: true
@@ -24,10 +24,10 @@ We're building a Webpack project with Bootstrap from scratch, so there are some
    npm init -y
    ```
 
-2. **Install Webpack.** Next we need to install our Webpack development dependencies: `webpack` for the core of Webpack, `webpack-cli` so we can run Webpack commands from the terminal, and `webpack-dev-server` so we can run a local development server. We use `--save-dev` to signal that these dependencies are only for development use and not for production.
+2. **Install Webpack.** Next we need to install our Webpack development dependencies: `webpack` for the core of Webpack, `webpack-cli` so we can run Webpack commands from the terminal, and `webpack-dev-server` so we can run a local development server. Additionally, we'll install `html-webpack-plugin` to be able to store our `index.html` in `src` directory instead of the default `dist` one. We use `--save-dev` to signal that these dependencies are only for development use and not for production.
 
    ```sh
-   npm i --save-dev webpack webpack-cli webpack-dev-server
+   npm i --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
    ```
 
 3. **Install Bootstrap.** Now we can install Bootstrap. We'll also install Popper since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don't plan on using those components, you can omit Popper here.
@@ -49,21 +49,20 @@ Now that we have all the necessary dependencies installed, we can get to work cr
 We've already created the `my-project` folder and initialized npm. Now we'll also create our `src` and `dist` folders to round out the project structure. Run the following from `my-project`, or manually create the folder and file structure shown below.
 
 ```sh
-mkdir {dist,src,src/js,src/scss}
-touch dist/index.html src/js/main.js src/scss/styles.scss webpack.config.js
+mkdir {src,src/js,src/scss}
+touch src/index.html src/js/main.js src/scss/styles.scss webpack.config.js
 ```
 
 When you're done, your complete project should look like this:
 
 ```text
 my-project/
-├── dist/
-│   └── index.html
 ├── src/
 │   ├── js/
 │   │   └── main.js
-│   └── scss/
-│       └── styles.scss
+│   ├── scss/
+│   │   └── styles.scss
+│   └── index.html
 ├── package-lock.json
 ├── package.json
 └── webpack.config.js
@@ -78,9 +77,13 @@ With dependencies installed and our project folder ready for us to start coding,
 1. **Open `webpack.config.js` in your editor.** Since it's blank, we'll need to add some boilerplate config to it so we can start our server. This part of the config tells Webpack where to look for our project's JavaScript, where to output the compiled code to (`dist`), and how the development server should behave (pulling from the `dist` folder with hot reload).
 
    ```js
+   'use strict'
+
    const path = require('path')
+   const HtmlWebpackPlugin = require('html-webpack-plugin')
 
    module.exports = {
+     mode: 'development',
      entry: './src/js/main.js',
      output: {
        filename: 'main.js',
@@ -90,11 +93,14 @@ With dependencies installed and our project folder ready for us to start coding,
        static: path.resolve(__dirname, 'dist'),
        port: 8080,
        hot: true
-     }
+     },
+     plugins: [
+       new HtmlWebpackPlugin({ template: './src/index.html' })
+     ]
    }
    ```
 
-2. **Next we fill in our `dist/index.html`.** This is the HTML page Webpack will load in the browser to utilize the bundled CSS and JS we'll add to it in later steps. Before we can do that, we have to give it something to render and include the `output` JS from the previous step.
+2. **Next we fill in our `src/index.html`.** This is the HTML page Webpack will load in the browser to utilize the bundled CSS and JS we'll add to it in later steps. Before we can do that, we have to give it something to render and include the `output` JS from the previous step.
 
    ```html
    <!doctype html>
@@ -109,20 +115,20 @@ With dependencies installed and our project folder ready for us to start coding,
          <h1>Hello, Bootstrap and Webpack!</h1>
          <button class="btn btn-primary">Primary button</button>
        </div>
-       <script src="./main.js"></script>
      </body>
    </html>
    ```
 
    We're including a little bit of Bootstrap styling here with the `div class="container"` and `<button>` so that we see when Bootstrap's CSS is loaded by Webpack.
 
-3. **Now we need an npm script to run Webpack.** Open `package.json` and add the `start` script shown below (you should already have the test script). We'll use this script to start our local Webpack dev server.
+3. **Now we need an npm script to run Webpack.** Open `package.json` and add the `start` script shown below (you should already have the test script). We'll use this script to start our local Webpack dev server. You can also add a `build` script shown below to build your project.
 
    ```json
    {
      // ...
      "scripts": {
-       "start": "webpack serve --mode development",
+       "start": "webpack serve",
+       "build": "webpack build --mode=production",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      // ...
@@ -146,9 +152,14 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first
 1. **Set up the loaders in `webpack.config.js`.** Your configuration file is now complete and should match the snippet below. The only new part here is the `module` section.
 
    ```js
+   'use strict'
+
    const path = require('path')
+   const autoprefixer = require('autoprefixer')
+   const HtmlWebpackPlugin = require('html-webpack-plugin')
 
    module.exports = {
+     mode: 'development',
      entry: './src/js/main.js',
      output: {
        filename: 'main.js',
@@ -159,28 +170,35 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first
        port: 8080,
        hot: true
      },
+     plugins: [
+       new HtmlWebpackPlugin({ template: './src/index.html' })
+     ],
      module: {
        rules: [
          {
            test: /\.(scss)$/,
            use: [
              {
+               // Adds CSS to the DOM by injecting a `<style>` tag
                loader: 'style-loader'
              },
              {
+               // Interprets `@import` and `url()` like `import/require()` and will resolve them
                loader: 'css-loader'
              },
              {
+               // Loader for webpack to process CSS with PostCSS
                loader: 'postcss-loader',
                options: {
                  postcssOptions: {
                    plugins: () => [
-                     require('autoprefixer')
+                     autoprefixer
                    ]
                  }
                }
              },
              {
+               // Loads a SASS/SCSS file and compiles it to CSS
                loader: 'sass-loader'
              }
            ]
@@ -196,7 +214,7 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first
 
    ```scss
    // Import all of Bootstrap's CSS
-   @import "~bootstrap/scss/bootstrap";
+   @import "bootstrap/scss/bootstrap";
    ```
 
    *You can also import our stylesheets individually if you want. [Read our Sass import docs]({{< docsref "/customize/sass#importing" >}}) for details.*
@@ -249,20 +267,27 @@ npm install --save-dev mini-css-extract-plugin
 Then instantiate and use the plugin in the Webpack configuration:
 
 ```diff
---- a/webpack/webpack.config.js
-+++ b/webpack/webpack.config.js
-@@ -1,8 +1,10 @@
-+const miniCssExtractPlugin = require('mini-css-extract-plugin')
+--- a/webpack.config.js
++++ b/webpack.config.js
+@@ -3,6 +3,7 @@
  const path = require('path')
- 
+ const autoprefixer = require('autoprefixer')
+ const HtmlWebpackPlugin = require('html-webpack-plugin')
++const miniCssExtractPlugin = require('mini-css-extract-plugin')
+
  module.exports = {
    mode: 'development',
-   entry: './src/js/main.js',
-+  plugins: [new miniCssExtractPlugin()],
-   output: {
-     filename: "main.js",
-     path: path.resolve(__dirname, "dist"),
-@@ -18,8 +20,8 @@ module.exports = {
+@@ -17,7 +18,8 @@ module.exports = {
+     hot: true
+   },
+   plugins: [
+-    new HtmlWebpackPlugin({ template: './src/index.html' })
++    new HtmlWebpackPlugin({ template: './src/index.html' }),
++    new miniCssExtractPlugin()
+   ],
+   module: {
+     rules: [
+@@ -25,8 +27,8 @@ module.exports = {
          test: /\.(scss)$/,
          use: [
            {
@@ -277,8 +302,8 @@ Then instantiate and use the plugin in the Webpack configuration:
 After running `npm run build` again, there will be a new file `dist/main.css`, which will contain all of the CSS imported by `src/js/main.js`. If you view `dist/index.html` in your browser now, the style will be missing, as it is now in `dist/main.css`. You can include the generated CSS in `dist/index.html` like this:
 
 ```diff
---- a/webpack/dist/index.html
-+++ b/webpack/dist/index.html
+--- a/dist/index.html
++++ b/dist/index.html
 @@ -3,6 +3,7 @@
    <head>
      <meta charset="utf-8">
@@ -296,9 +321,9 @@ Bootstrap's CSS includes multiple references to SVG files via inline `data:` URI
 Configure Webpack to extract inline SVG files like this:
 
 ```diff
---- a/webpack/webpack.config.js
-+++ b/webpack/webpack.config.js
-@@ -16,6 +16,14 @@ module.exports = {
+--- a/webpack.config.js
++++ b/webpack.config.js
+@@ -23,6 +23,14 @@ module.exports = {
    },
    module: {
      rules: [