diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 66ff8cc4fcf7..8fdf455801ed 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -72,7 +72,7 @@ const PLACEMENT_RIGHT = isRTL ? 'left-start' : 'right-start'
 const PLACEMENT_LEFT = isRTL ? 'right-start' : 'left-start'
 
 const Default = {
-  offset: [0, 0],
+  offset: [0, 2],
   flip: true,
   boundary: 'clippingParents',
   reference: 'toggle',
diff --git a/js/src/popover.js b/js/src/popover.js
index b5a788961cd5..4c672b51892e 100644
--- a/js/src/popover.js
+++ b/js/src/popover.js
@@ -25,6 +25,7 @@ const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g')
 const Default = {
   ...Tooltip.Default,
   placement: 'right',
+  offset: [0, 8],
   trigger: 'click',
   content: '',
   template: '<div class="popover" role="tooltip">' +
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 594c06399054..f659ddc77e92 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -22,7 +22,7 @@
   display: none; // none by default, but block on "open" of the menu
   min-width: $dropdown-min-width;
   padding: $dropdown-padding-y $dropdown-padding-x;
-  margin: $dropdown-spacer 0 0; // override default ul
+  margin: 0; // Override default margin of ul
   @include font-size($dropdown-font-size);
   color: $dropdown-color;
   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
@@ -68,8 +68,11 @@
   .dropdown-menu {
     top: auto;
     bottom: 100%;
-    margin-top: 0;
-    margin-bottom: $dropdown-spacer;
+
+    &.show:not([data-popper-placement]) {
+      margin-top: 0;
+      margin-bottom: $dropdown-spacer;
+    }
   }
 
   .dropdown-toggle {
@@ -82,8 +85,11 @@
     top: 0;
     right: auto;
     left: 100%;
-    margin-top: 0;
-    margin-left: $dropdown-spacer;
+
+    &.show:not([data-popper-placement]) {
+      margin-top: 0;
+      margin-left: $dropdown-spacer;
+    }
   }
 
   .dropdown-toggle {
@@ -99,8 +105,11 @@
     top: 0;
     right: 100%;
     left: auto;
-    margin-top: 0;
-    margin-right: $dropdown-spacer;
+
+    &.show:not([data-popper-placement]) {
+      margin-top: 0;
+      margin-right: $dropdown-spacer;
+    }
   }
 
   .dropdown-toggle {
@@ -174,6 +183,10 @@
 
 .dropdown-menu.show {
   display: block;
+
+  &:not([data-popper-placement]) {
+    margin-top: $dropdown-spacer;
+  }
 }
 
 // Dropdown section headers
diff --git a/scss/_popover.scss b/scss/_popover.scss
index 3778f6ff76ac..a55555e2e921 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -35,9 +35,6 @@
 }
 
 .bs-popover-top {
-  // Overrule margin set by popper.js
-  margin-bottom: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
-
   > .popover-arrow {
     bottom: subtract(-$popover-arrow-height, $popover-border-width);
 
@@ -56,9 +53,6 @@
 }
 
 .bs-popover-end {
-  // Overrule margin set by popper.js
-  margin-left: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
-
   > .popover-arrow {
     left: subtract(-$popover-arrow-height, $popover-border-width);
     width: $popover-arrow-height;
@@ -79,9 +73,6 @@
 }
 
 .bs-popover-bottom {
-  // Overrule margin set by popper.js
-  margin-top: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
-
   > .popover-arrow {
     top: subtract(-$popover-arrow-height, $popover-border-width);
 
@@ -112,9 +103,6 @@
 }
 
 .bs-popover-start {
-  // Overrule margin set by popper.js
-  margin-right: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
-
   > .popover-arrow {
     right: subtract(-$popover-arrow-height, $popover-border-width);
     width: $popover-arrow-height;
diff --git a/site/content/docs/5.0/components/dropdowns.md b/site/content/docs/5.0/components/dropdowns.md
index 37c3a74c11ba..978217583719 100644
--- a/site/content/docs/5.0/components/dropdowns.md
+++ b/site/content/docs/5.0/components/dropdowns.md
@@ -899,7 +899,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
     <tr>
       <td><code>offset</code></td>
       <td>array | string | function</td>
-      <td><code>[0, 0]</code></td>
+      <td><code>[0, 2]</code></td>
       <td>
         <p>Offset of the dropdown relative to its target. You can pass a string in data attributes with comma separated values like: <code>data-bs-offset="10,20"</code></p>
         <p>When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: <code>[<a href="https://popper.js.org/docs/v2/modifiers/offset/#skidding-1">skidding</a>, <a href="https://popper.js.org/docs/v2/modifiers/offset/#distance-1">distance</a>]</code>.</p>
diff --git a/site/content/docs/5.0/components/popovers.md b/site/content/docs/5.0/components/popovers.md
index ddfc6c130afe..3fac25526798 100644
--- a/site/content/docs/5.0/components/popovers.md
+++ b/site/content/docs/5.0/components/popovers.md
@@ -270,7 +270,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
     <tr>
       <td><code>offset</code></td>
       <td>array | string | function</td>
-      <td><code>[0, 0]</code></td>
+      <td><code>[0, 8]</code></td>
       <td>
         <p>Offset of the popover relative to its target. You can pass a string in data attributes with comma separated values like: <code>data-bs-offset="10,20"</code></p>
         <p>When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: <code>[<a href="https://popper.js.org/docs/v2/modifiers/offset/#skidding-1">skidding</a>, <a href="https://popper.js.org/docs/v2/modifiers/offset/#distance-1">distance</a>]</code>.</p>