diff --git a/js/layout-tab-scripts.js b/js/layout-tab-scripts.js
index d2d557d..94c33da 100644
--- a/js/layout-tab-scripts.js
+++ b/js/layout-tab-scripts.js
@@ -44,20 +44,32 @@
           colsLabel.wrapInner('<div class="bs_tooltip bs_tooltip-lg"></div>');
 
           // Provide a graphical representation of the columns via some nifty divs styling.
+          var width;
+          var text;
           $.each(colsConfig, function(index, value) {
-            var width = ((value / numOfCols) * 100);
+            if (!colsConfig.some(isNaN)) {
+              width = ((value / numOfCols) * 100);
+              text = width.toFixed(0) + '%';
+            } else {
+              width = ((1 / colsConfig.length) * 100);
+              if(!$.isNumeric(value)) {
+                text = value;
+              } else {
+                text = value + ' cols';
+              }
+            }
             $('<div />', {
-              'text': width.toFixed(0) + '%',
+              'text': text,
               'style': 'width:' + width + '%;',
               'class': col_classes,
             })
-            .appendTo(colsLabel)
-            .on('click', function () {
-              $(this).parents('.blb_breakpoint_cols').find('.blb_breakpoint_col').removeClass('bp-selected');
-              $(this).parents('.blb_breakpoint_cols').find('input').prop("checked", false);
-              $(this).parents('label').parent().find('input').prop("checked", true);
-              $(this).parents('label').find('.blb_breakpoint_col').addClass('bp-selected');
-            });
+              .appendTo(colsLabel)
+              .on('click', function () {
+                $(this).parents('.blb_breakpoint_cols').find('.blb_breakpoint_col').removeClass('bp-selected');
+                $(this).parents('.blb_breakpoint_cols').find('input').prop("checked", false);
+                $(this).parents('label').parent().find('input').prop("checked", true);
+                $(this).parents('label').find('.blb_breakpoint_col').addClass('bp-selected');
+              });
 
           });
         });
diff --git a/src/Entity/Breakpoint.php b/src/Entity/Breakpoint.php
index 74ed7f7..68230ce 100644
--- a/src/Entity/Breakpoint.php
+++ b/src/Entity/Breakpoint.php
@@ -128,7 +128,11 @@ class Breakpoint extends ConfigEntityBase implements BreakpointInterface {
     if (count($strucutre) > 1) {
       $sufix = $strucutre[$key];
     }
-    $class = $this->getBaseClass() . '-' . $sufix;
+    if ($sufix == 'flex') {
+      $class = $this->getBaseClass();
+    } else {
+      $class = $this->getBaseClass() . '-' . $sufix;
+    }
     return $class;
   }
 
diff --git a/src/Form/LayoutOptionForm.php b/src/Form/LayoutOptionForm.php
index 02e9024..6185c4d 100644
--- a/src/Form/LayoutOptionForm.php
+++ b/src/Form/LayoutOptionForm.php
@@ -103,7 +103,7 @@ class LayoutOptionForm extends EntityForm implements ContainerInjectionInterface
       '#title' => $this->t('Structure'),
       '#maxlength' => 255,
       '#default_value' => $option->getStructure() ?: '',
-      '#description' => $this->t('Add numbers seperated by space; if the number of columns at this layout is two and you are using bootstrap 12 Grid system<br/> this field must be two numbers at the sum of them sould equal 12. eg: <b>6 6</b> or <b>8 4</b> ...etc.'),
+      '#description' => $this->t('Add numbers seperated by space; if the number of columns at this layout is two and you are using bootstrap 12 Grid system<br/> this field must be two numbers at the sum of them sould equal 12. eg: <b>6 6</b> or <b>8 4</b> ...etc. Alternatively, enter "auto" resulting in CSS-Class "col-auto" or "flex" resulting in just "col"'),
       '#required' => TRUE,
     ];
 
@@ -176,25 +176,27 @@ class LayoutOptionForm extends EntityForm implements ContainerInjectionInterface
     $structure = $form_state->getValue('structure');
     $structure = explode(' ', $structure);
     $invalid_structure = FALSE;
-    // Make sure that all items are numbers.
+    // Make sure that all items are numbers or 'auto' or 'flex'.
+    $allowed_strings = ['auto', 'flex'];
     foreach ($structure as $col) {
-      if (!is_numeric($col)) {
+      if (!is_numeric($col) && !in_array($col, $allowed_strings)) {
         $invalid_structure = TRUE;
         break;
       }
     }
 
-    // Check the number of columns and the sum of the structure.
-    if (
-      array_sum($structure) != 12
-    ) {
-      $invalid_structure = TRUE;
+    // If structure consists only of numbers, check the sum of the structure.
+    $structure = array_diff($structure, $allowed_strings);
+    if (count($structure) >= 2) {
+      if (array_sum($structure) != 12) {
+        $invalid_structure = TRUE;
+      }
     }
 
     if ($invalid_structure) {
       $form_state->setErrorByName(
         'structure',
-        $this->t('Structure must be @cols numbers separated by space and the sum of these numbers must equal 12!', ['@cols' => $layout->getNumberOfColumns()])
+        $this->t('Structure must be @cols numbers separated by space and the sum of these numbers must equal 12! Alternatively, enter "auto" resulting in CSS-Class "col-auto" or "flex" resulting in just "col"', ['@cols' => $layout->getNumberOfColumns()])
       );
     }
   }