diff --git a/content_scripts/ct.responsiveHelper.js b/content_scripts/ct.responsiveHelper.js
index 3ae9b88..3cc4cd6 100644
--- a/content_scripts/ct.responsiveHelper.js
+++ b/content_scripts/ct.responsiveHelper.js
@@ -4,6 +4,58 @@
   const ATTR_TAG = 'attr-tag';
   const ATTR_VERSION = 'attr-version';
 
+  // Get all bootstrap4 breakpoints from :root style
+  function getBreakpoints4() {
+    const searchStr = '--breakpoint-';
+
+    // Get all computed :root style properties
+    const style = getComputedStyle( document.documentElement );
+
+    // Loop properties and filter breakpoints
+    // Return array of objects, eg: [{ key: 'xl', val: 1200 }]
+    let lastEmpty = false;
+    let bps = [...Array(1000).keys()].reduce( ( bps, i ) => {
+      if ( lastEmpty )  // Bail out if last entry was already empty.
+        return bps;
+
+      const key = style.item( i );
+
+      if ( ! key.length ) { // Bail out if entry is  empty.
+        lastEmpty = true;
+        return bps;
+      }
+
+      if ( ! key.startsWith( searchStr ) ) { // Filter breakpoint properties
+        return bps;
+      }
+
+      return [
+        ...bps,
+        {
+          key: key.replace( searchStr, '' ),
+          val: parseInt( style.getPropertyValue( key ).trim().replace( 'px', '' ) ),
+        }
+      ]
+      }, [] );
+
+      // Sort breakpoints from large to small.
+      bps.sort( ( a, b ) => {
+        if ( a.val > b.val ) {
+          return -1;
+        }
+        if ( a.val < b.val ) {
+          return 1;
+        }
+        return 0;
+      } );
+
+      // Build the breakpoint config objects.
+      return [...bps].map( ( bp, i ) => bps.length === i + 1
+      ? { tag: bp.key, version: '4', cls: 'd-none d-block' }
+      : { tag: bp.key, version: '4', cls: 'd-none d-' + bp.key + '-block' }
+      );
+  }
+
   function removeOldDOM() {
     const oldContainer = document.querySelector(CONTAINER_SELECTOR);
     if (oldContainer) {
@@ -17,11 +69,7 @@
       { tag: 'md', version: '3', cls: 'visible-md-block' },
       { tag: 'sm', version: '3', cls: 'visible-sm-block' },
       { tag: 'xs', version: '3', cls: 'visible-xs-block' },
-      { tag: 'xl', version: '4', cls: 'd-none d-xl-block' },
-      { tag: 'lg', version: '4', cls: 'd-none d-lg-block' },
-      { tag: 'md', version: '4', cls: 'd-none d-md-block' },
-      { tag: 'sm', version: '4', cls: 'd-none d-sm-block' },
-      { tag: 'xs', version: '4', cls: 'd-none d-block' },
+      ...getBreakpoints4(),
     ];
 
     var container = document.createElement('div');
@@ -81,7 +129,7 @@
        }, 66);
     }
   }
-  removeOldDOM(); 
+  removeOldDOM();
   insertDOM();
   sendMessage();
 }());