diff --git a/site/content/docs/5.1/components/alerts.md b/site/content/docs/5.1/components/alerts.md
index 5a5b4c1405..ac312a6e9e 100644
--- a/site/content/docs/5.1/components/alerts.md
+++ b/site/content/docs/5.1/components/alerts.md
@@ -130,6 +130,29 @@ You can see this in action with a live demo:
 When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the `closed.bs.alert` event and programmatically sets `focus()` to the most appropriate location in the page. If you're planning to move focus to a non-interactive element that normally does not receive focus, make sure to add `tabindex="-1"` to the element.
 {{< /callout >}}
 
+### Dark variant
+
+Add `.bg-dark` to the `.alert` for a dark variant. Close button can be inverted as well by using the [dark variant of close button]({{< docsref "/components/close-button#dark-variant" >}})
+
+{{< example class="bg-dark" >}}
+<div class="alert alert-success bg-dark" role="alert">
+  <span class="alert-icon"><span class="visually-hidden">Success</span></span>
+  <p>Success notification text goes here.</p>
+</div>
+<div class="alert alert-success bg-dark" role="alert">
+  <span class="alert-icon"><span class="visually-hidden">Success</span></span>
+  <div>
+    <h4 class="alert-heading">Success notification text with <a href="#">a link</a> goes here.</h4>
+    <p>Description text with <a href="#">a link</a> goes here.</p>
+  </div>
+</div>
+<div class="alert alert-warning alert-dismissible fade show bg-dark" role="alert">
+  <span class="alert-icon"><span class="visually-hidden">Warning</span></span>
+  <p>Warning notification text goes here.</p>
+  <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert"><span class="visually-hidden">Close</span></button>
+</div>
+{{< /example >}}
+
 ## CSS
 
 <small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
diff --git a/site/content/docs/5.1/components/close-button.md b/site/content/docs/5.1/components/close-button.md
index 5cb0be996d..1e36b3b81f 100644
--- a/site/content/docs/5.1/components/close-button.md
+++ b/site/content/docs/5.1/components/close-button.md
@@ -22,7 +22,7 @@ Disabled close buttons change their `color`. We've also applied `pointer-events:
 <button type="button" class="btn-close" disabled><span class="visually-hidden">Close</span></button>
 {{< /example >}}
 
-## White variant
+## Dark variant
 
 Change the default `.btn-close` to be white with the `.btn-close-white` class.