diff --git a/site/content/docs/5.0/components/list-group.md b/site/content/docs/5.0/components/list-group.md
index 1debfdd69..42d1d53d7 100644
--- a/site/content/docs/5.0/components/list-group.md
+++ b/site/content/docs/5.0/components/list-group.md
@@ -436,32 +436,14 @@ When showing a new tab, the events fire in the following order:
 
 If no tab was already active, the `hide.bs.tab` and `hidden.bs.tab` events will not be fired.
 
-<table class="table">
-  <thead>
-    <tr>
-      <th style="width: 150px;">Event type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>show.bs.tab</code></td>
-      <td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
-    </tr>
-    <tr>
-      <td><code>shown.bs.tab</code></td>
-      <td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
-    </tr>
-    <tr>
-      <td><code>hide.bs.tab</code></td>
-      <td>This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the current active tab and the new soon-to-be-active tab, respectively.</td>
-    </tr>
-    <tr>
-      <td><code>hidden.bs.tab</code></td>
-      <td>This event fires after a new tab is shown (and thus the previous active tab is hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the previous active tab and the new active tab, respectively.</td>
-    </tr>
-  </tbody>
-</table>
+{{< bs-table "table" >}}
+| Event type | Description |
+| --- | --- |
+| `show.bs.tab` | This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |
+| `shown.bs.tab` | This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |
+| `hide.bs.tab` | This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively. |
+| `hidden.bs.tab` | This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively. |
+{{< /bs-table >}}
 
 ```js
 var tabEl = document.querySelector('a[data-bs-toggle="list"]')
diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md
index 9221f30e6..f837249c1 100644
--- a/site/content/docs/5.0/components/modal.md
+++ b/site/content/docs/5.0/components/modal.md
@@ -655,40 +655,16 @@ Our default modal without modifier class constitutes the "medium" size modal.
 
 Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a `.modal-dialog`.
 
-<table class="table">
-  <thead>
-    <tr>
-      <th>Class</th>
-      <th>Availability</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>.modal-fullscreen</code></td>
-      <td>Always</td>
-    </tr>
-    <tr>
-      <td><code>.modal-fullscreen-sm-down</code></td>
-      <td>Below <code>576px</code></td>
-    </tr>
-    <tr>
-      <td><code>.modal-fullscreen-md-down</code></td>
-      <td>Below <code>768px</code></td>
-    </tr>
-    <tr>
-      <td><code>.modal-fullscreen-lg-down</code></td>
-      <td>Below <code>992px</code></td>
-    </tr>
-    <tr>
-      <td><code>.modal-fullscreen-xl-down</code></td>
-      <td>Below <code>1200px</code></td>
-    </tr>
-    <tr>
-      <td><code>.modal-fullscreen-xxl-down</code></td>
-      <td>Below <code>1400px</code></td>
-    </tr>
-  </tbody>
-</table>
+{{< bs-table >}}
+| Class | Availability |
+| --- | --- | --- |
+| `.modal-fullscreen` | Always |
+| `.modal-fullscreen-sm-down` | `576px` |
+| `.modal-fullscreen-md-down` | `768px` |
+| `.modal-fullscreen-lg-down` | `992px` |
+| `.modal-fullscreen-xl-down` | `1200px` |
+| `.modal-fullscreen-xxl-down` | `1400px` |
+{{< /bs-table >}}
 
 <div class="bd-example">
   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen">Full screen</button>
diff --git a/site/content/docs/5.0/components/navs-tabs.md b/site/content/docs/5.0/components/navs-tabs.md
index fb2712bb5..4c78c8b7a 100644
--- a/site/content/docs/5.0/components/navs-tabs.md
+++ b/site/content/docs/5.0/components/navs-tabs.md
@@ -629,32 +629,14 @@ When showing a new tab, the events fire in the following order:
 
 If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events will not be fired.
 
-<table class="table">
-  <thead>
-    <tr>
-      <th style="width: 150px;">Event type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>show.bs.tab</code></td>
-      <td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
-    </tr>
-    <tr>
-      <td><code>shown.bs.tab</code></td>
-      <td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
-    </tr>
-    <tr>
-      <td><code>hide.bs.tab</code></td>
-      <td>This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the current active tab and the new soon-to-be-active tab, respectively.</td>
-    </tr>
-    <tr>
-      <td><code>hidden.bs.tab</code></td>
-      <td>This event fires after a new tab is shown (and thus the previous active tab is hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the previous active tab and the new active tab, respectively.</td>
-    </tr>
-  </tbody>
-</table>
+{{< bs-table "table" >}}
+| Event type | Description |
+| --- | --- |
+| `show.bs.tab` | This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |
+| `shown.bs.tab` | This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |
+| `hide.bs.tab` | This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively. |
+| `hidden.bs.tab` | This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively. |
+{{< /bs-table >}}
 
 ```js
 var tabEl = document.querySelector('a[data-bs-toggle="tab"]')
diff --git a/site/content/docs/5.0/content/typography.md b/site/content/docs/5.0/content/typography.md
index b8e4f558a..49845baea 100644
--- a/site/content/docs/5.0/content/typography.md
+++ b/site/content/docs/5.0/content/typography.md
@@ -22,52 +22,16 @@ These styles can be found within `_reboot.scss`, and the global variables are de
 
 All HTML headings, `<h1>` through `<h6>`, are available.
 
-<table class="table">
-  <thead>
-    <tr>
-      <th>Heading</th>
-      <th>Example</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        {{< markdown >}}`<h1></h1>`{{< /markdown >}}
-      </td>
-      <td><span class="h1">h1. Bootstrap heading</span></td>
-    </tr>
-    <tr>
-      <td>
-        {{< markdown >}}`<h2></h2>`{{< /markdown >}}
-      </td>
-      <td><span class="h2">h2. Bootstrap heading</span></td>
-    </tr>
-    <tr>
-      <td>
-        {{< markdown >}}`<h3></h3>`{{< /markdown >}}
-      </td>
-      <td><span class="h3">h3. Bootstrap heading</span></td>
-    </tr>
-    <tr>
-      <td>
-        {{< markdown >}}`<h4></h4>`{{< /markdown >}}
-      </td>
-      <td><span class="h4">h4. Bootstrap heading</span></td>
-    </tr>
-    <tr>
-      <td>
-        {{< markdown >}}`<h5></h5>`{{< /markdown >}}
-      </td>
-      <td><span class="h5">h5. Bootstrap heading</span></td>
-    </tr>
-    <tr>
-      <td>
-        {{< markdown >}}`<h6></h6>`{{< /markdown >}}
-      </td>
-      <td><span class="h6">h6. Bootstrap heading</span></td>
-    </tr>
-  </tbody>
-</table>
+{{< bs-table >}}
+| Heading | Example |
+| --- | --- |
+| `<h1></h1>` | <span class="h1">h1. Bootstrap heading</span> |
+| `<h2></h2>` | <span class="h2">h2. Bootstrap heading</span> |
+| `<h3></h3>` | <span class="h3">h3. Bootstrap heading</span> |
+| `<h4></h4>` | <span class="h4">h4. Bootstrap heading</span> |
+| `<h5></h5>` | <span class="h5">h5. Bootstrap heading</span> |
+| `<h6></h6>` | <span class="h6">h6. Bootstrap heading</span> |
+{{< /bs-table >}}
 
 ```html
 <h1>h1. Bootstrap heading</h1>
diff --git a/site/content/docs/5.0/getting-started/build-tools.md b/site/content/docs/5.0/getting-started/build-tools.md
index 7d5cb51aa..29c61ce9f 100644
--- a/site/content/docs/5.0/getting-started/build-tools.md
+++ b/site/content/docs/5.0/getting-started/build-tools.md
@@ -22,52 +22,18 @@ When completed, you'll be able to run the various commands provided from the com
 
 Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/package.json) includes numerous tasks for developing the project. Run `npm run` to see all the npm scripts in your terminal. **Primary tasks include:**
 
-<table class="table">
-  <thead>
-    <tr>
-      <th>Task</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <code>npm start</code>
-      </td>
-      <td>
-        Compiles CSS and JavaScript, builds the documentation, and starts a local server.
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>npm run dist</code>
-      </td>
-      <td>
-       Creates the <code>dist/</code> directory with compiled files. Requires <a href="https://sass-lang.com/">Sass</a>, <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a>, and <a href="https://github.com/terser/terser">terser</a>.
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>npm test</code>
-      </td>
-      <td>
-        Runs tests locally after running <code>npm run dist</code>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>npm run docs-serve</code>
-      </td>
-      <td>
-        Builds and runs the documentation locally.
-      </td>
-    </tr>
-  </tbody>
-</table>
+{{< bs-table >}}
+| Task | Description |
+| --- | --- |
+| `npm start` | Compiles CSS and JavaScript, builds the documentation, and starts a local server. |
+| `npm run dist` | Creates the `dist/` directory with compiled files. Uses [Sass](https://sass-lang.com/), [Autoprefixer](https://github.com/postcss/autoprefixer), and [terser](https://github.com/terser/terser). |
+| `npm test` | Runs tests locally after running `npm run dist` |
+| `npm run docs-serve` | Builds and runs the documentation locally. |
+{{< /bs-table >}}
 
 ## Autoprefixer
 
-Bootstrap uses [Autoprefixer][autoprefixer] (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.
+Bootstrap uses [Autoprefixer](https://github.com/postcss/autoprefixer) (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.
 
 We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [.browserslistrc]({{< param repo >}}/blob/v{{< param current_version >}}/.browserslistrc) for details.
 
@@ -84,5 +50,3 @@ Learn more about using Hugo by reading its [documentation](https://gohugo.io/doc
 ## Troubleshooting
 
 Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun `npm install`.
-
-[autoprefixer]: https://github.com/postcss/autoprefixer
diff --git a/site/content/docs/5.0/utilities/display.md b/site/content/docs/5.0/utilities/display.md
index 2d033ba85..cc623f4d3 100644
--- a/site/content/docs/5.0/utilities/display.md
+++ b/site/content/docs/5.0/utilities/display.md
@@ -56,72 +56,24 @@ To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl,x
 
 To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none .d-xxl-none` will hide the element for all screen sizes except on medium and large devices.
 
-<table class="table">
-  <thead>
-    <tr>
-      <th>Screen size</th>
-      <th>Class</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Hidden on all</td>
-      <td><code>.d-none</code></td>
-    </tr>
-    <tr>
-      <td>Hidden only on xs</td>
-      <td><code>.d-none .d-sm-block</code></td>
-    </tr>
-    <tr>
-      <td>Hidden only on sm</td>
-      <td><code>.d-sm-none .d-md-block</code></td>
-    </tr>
-    <tr>
-      <td>Hidden only on md</td>
-      <td><code>.d-md-none .d-lg-block</code></td>
-    </tr>
-    <tr>
-      <td>Hidden only on lg</td>
-      <td><code>.d-lg-none .d-xl-block</code></td>
-    </tr>
-    <tr>
-      <td>Hidden only on xl</td>
-      <td><code>.d-xl-none</code></td>
-    </tr>
-    <tr>
-      <td>Hidden only on xxl</td>
-      <td><code>.d-xxl-none</code></td>
-    </tr>
-    <tr>
-      <td>Visible on all</td>
-      <td><code>.d-block</code></td>
-    </tr>
-    <tr>
-      <td>Visible only on xs</td>
-      <td><code>.d-block .d-sm-none</code></td>
-    </tr>
-    <tr>
-      <td>Visible only on sm</td>
-      <td><code>.d-none .d-sm-block .d-md-none</code></td>
-    </tr>
-    <tr>
-      <td>Visible only on md</td>
-      <td><code>.d-none .d-md-block .d-lg-none</code></td>
-    </tr>
-    <tr>
-      <td>Visible only on lg</td>
-      <td><code>.d-none .d-lg-block .d-xl-none</code></td>
-    </tr>
-    <tr>
-      <td>Visible only on xl</td>
-      <td><code>.d-none .d-xl-block .d-xxl-none</code></td>
-    </tr>
-    <tr>
-      <td>Visible only on xxl</td>
-      <td><code>.d-none .d-xxl-block</code></td>
-    </tr>
-  </tbody>
-</table>
+{{< bs-table "table" >}}
+| Screen size | Class |
+| --- | --- |
+| Hidden on all | `.d-none` |
+| Hidden only on xs | `.d-none .d-sm-block` |
+| Hidden only on sm | `.d-sm-none .d-md-block` |
+| Hidden only on md | `.d-md-none .d-lg-block` |
+| Hidden only on lg | `.d-lg-none .d-xl-block` |
+| Hidden only on xl | `.d-xl-none` |
+| Hidden only on xxl | `.d-xxl-none` |
+| Visible on all | `.d-block` |
+| Visible only on xs | `.d-block .d-sm-none` |
+| Visible only on sm | `.d-none .d-sm-block .d-md-none` |
+| Visible only on md | `.d-none .d-md-block .d-lg-none` |
+| Visible only on lg | `.d-none .d-lg-block .d-xl-none` |
+| Visible only on xl | `.d-none .d-xl-block .d-xxl-none` |
+| Visible only on xxl | `.d-none .d-xxl-block` |
+{{< /bs-table >}}
 
 {{< example >}}
 <div class="d-lg-none">hide on lg and wider screens</div>