diff --git a/scss/_alert.scss b/scss/_alert.scss
index b8cff9b71e..292a0f426e 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -47,10 +47,10 @@
   // Adjust close link position
   .btn-close {
     position: absolute;
-    top: 0;
-    right: 0;
+    top: var(--bs-alert-padding-y);
+    right: var(--bs-alert-padding-x);
     z-index: $stretched-link-z-index + 1;
-    padding: $alert-padding-y * 1.25 $alert-padding-x;
+    padding: 5px; // TODO: use a variable
   }
 }
 
diff --git a/site/content/docs/5.3/components/alerts.md b/site/content/docs/5.3/components/alerts.md
index 8e3d99f537..441fd169e6 100644
--- a/site/content/docs/5.3/components/alerts.md
+++ b/site/content/docs/5.3/components/alerts.md
@@ -134,10 +134,37 @@ Using the alert JavaScript plugin, it's possible to dismiss any alert inline. He
 You can see this in action with a live demo:
 
 {{< example >}}
+<div class="alert alert-warning alert-dismissible fade show" role="alert" style="--bs-alert-padding-y: 5px; --bs-alert-padding-x: 5px">
+  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>
+
+<div class="alert alert-warning alert-dismissible fade show" role="alert" style="--bs-alert-padding-y: 50px; --bs-alert-padding-x: 50px">
+  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>
+
 <div class="alert alert-warning alert-dismissible fade show" role="alert">
   <strong>Holy guacamole!</strong> You should check in on some of those fields below.
   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
 </div>
+
+<hr>
+
+<div class="alert alert-warning alert-dismissible fade show" role="alert" style="--bs-alert-padding-y: 5px; --bs-alert-padding-x: 5px">
+  <strong>Holy guacamole!</strong> You should check in on some of those fields below.in on some of those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields below
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>
+
+<div class="alert alert-warning alert-dismissible fade show" role="alert" style="--bs-alert-padding-y: 50px; --bs-alert-padding-x: 50px">
+  <strong>Holy guacamole!</strong> You should check in on some of those fields below.in on some those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields below
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>
+
+<div class="alert alert-warning alert-dismissible fade show" role="alert">
+  <strong>Holy guacamole!</strong> You should check in on some of those fields below.in on some of those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields belowin on some of those fields below
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>
 {{< /example >}}
 
 {{< callout warning >}}