diff --git a/docs/4.0/components/dropdowns.md b/docs/4.0/components/dropdowns.md
index cdf713b03f..d38b410c78 100644
--- a/docs/4.0/components/dropdowns.md
+++ b/docs/4.0/components/dropdowns.md
@@ -588,7 +588,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
   <tbody>
     <tr>
       <td>offset</td>
-      <td>number | string</td>
+      <td>number | string | function</td>
       <td>0</td>
       <td>Offset of the dropdown relative to its target. For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..offset.offset">offset docs</a>.</td>
     </tr>
diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index f76f84ef0a..6681df668c 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -80,7 +80,7 @@ const Dropdown = (() => {
   }
 
   const DefaultType = {
-    offset      : '(number|string)',
+    offset      : '(number|string|function)',
     flip        : 'boolean'
   }
 
@@ -246,12 +246,19 @@ const Dropdown = (() => {
     }
 
     _getPopperConfig() {
+      const offsetConf = {}
+      if (typeof this._config.offset === 'function') {
+        offsetConf.fn = (data) => {
+          data.offsets = $.extend({}, data.offsets, this._config.offset(data.offsets) || {})
+          return data
+        }
+      } else {
+        offsetConf.offset = this._config.offset
+      }
       const popperConfig = {
         placement : this._getPlacement(),
         modifiers : {
-          offset : {
-            offset : this._config.offset
-          },
+          offset : offsetConf,
           flip : {
             enabled : this._config.flip
           }