Alerts with dark background

site/content/docs/5.1/components/alerts.md

@@ -130,6 +130,31 @@ 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 background
+
+To get the inverted alert behavior, simply add `.bg-dark` class to your alert.
+
+Change the default `.btn-close` to be white by adding the `.btn-close-white` class.
+
+{{< 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>