diff --git a/addons/website/static/src/snippets/s_process_steps/options.js b/addons/website/static/src/snippets/s_process_steps/options.js
index ac45a6be25f..1e6581d9345 100644
--- a/addons/website/static/src/snippets/s_process_steps/options.js
+++ b/addons/website/static/src/snippets/s_process_steps/options.js
@@ -135,8 +135,9 @@ options.registry.StepsConnector = options.Class.extend({
      * @returns {integer}
      */
     _getStepColSize(stepEl) {
-        const colClass = stepEl.className.split(' ').find(cl => cl.startsWith('col-lg'));
-        return parseInt(colClass[colClass.length - 1]);
+        const classPrefix = 'col-lg-';
+        const colClass = stepEl.className.split(' ').find(cl => cl.startsWith(classPrefix));
+        return parseInt(colClass.replace(classPrefix, ''));
     },
     /**
      * Returns the padding of the step, as a number of bootstrap lg-col.
@@ -146,8 +147,10 @@ options.registry.StepsConnector = options.Class.extend({
      * @returns {integer}
      */
     _getStepColPadding(stepEl) {
-        const paddingClass = stepEl.className.split(' ').find(cl => cl.startsWith('offset-lg'));
-        return paddingClass ? parseInt(paddingClass[paddingClass.length - 1]) : 0;
+        const classPrefix = 'offset-lg-';
+        const paddingClass = stepEl.className.split(' ').find(cl => cl.startsWith(classPrefix));
+        return paddingClass ? parseInt(paddingClass.replace(classPrefix, '')) : 0;
+
     },
     /**
      * Returns the svg path based on the type of connector.