diff --git a/README.md b/README.md
index 48f71f3..7d00e9e 100644
--- a/README.md
+++ b/README.md
@@ -87,7 +87,7 @@ The default configuration is
 var config = {
     decrementButton: "<strong>-</strong>", // button text
     incrementButton: "<strong>+</strong>", // ..
-    groupClass: "", // css class of the input-group (sizing with input-group-sm or input-group-lg)
+    groupClass: "", // css class of the resulting input-group
     buttonsClass: "btn-outline-secondary",
     buttonsWidth: "2.5rem",
     textAlign: "center",
@@ -167,8 +167,12 @@ $(element).val(newValue) // write
 
 The attributes
 `min`, `max`, `step`, `stepMax`, `decimals`, `placeholder`, `required`, `disabled` and `class`
+are handled dynamically. The `class` attribute value is dynamically copied to the input element.
 
-are handled dynamically. The `class` attribute value is copied to the input-group and the resulting input element. 
+#### Sizing
+
+If the original elements class is set to `form-control-sm` of `form-control-lg` the class of the resulting input-group is 
+dynamically set to `input-group-sm` or `input-group-lg`. 
 
 ### Events
 
diff --git a/index.html b/index.html
index a53a19f..7881ecb 100644
--- a/index.html
+++ b/index.html
@@ -243,17 +243,20 @@ <h3>Prefix and Suffix</h3>
 
 
     <h3>Sizing</h3>
-    <p>You can set the group css class via configuration.</p>
+    <p class="text-info">Please note: The sizing changed with version 1.11 from setting the group class in the configuration to automatically use
+    the original elements class.</p>
+    <p>Sizing now works out of the box. If the original input has the class <span class="code">form-control-sm</span> or <span class="code">form-control-lg</span>,
+        the resulting group gets the class <span class="code">input-group-sm</span> or <span class="code">input-group-lg</span>.</p>
     <p>
         Small
-        <input class="small" value="0.0" data-decimals="4" min="-1" max="1" step="0.0001"/>
+        <input type="number" class="form-control-sm" value="0.0" data-decimals="4" min="-1" max="1" step="0.0001"/>
     </p>
-    <pre><code class="language-javascript">$("input.small").inputSpinner({groupClass: "input-group-sm"})</code></pre>
+    <pre><code class="language-html">&lt;input type="number" class="form-control-sm" value="0.0" data-decimals="4" min="-1" max="1" step="0.0001"/></code></pre>
     <p>
         Large
-        <input class="large" value="1000000" data-decimals="0" min="0" max="2000000" step="1"/>
+        <input type="number" class="form-control-lg" value="1000000" data-decimals="0" min="0" max="2000000" step="1"/>
     </p>
-    <pre><code class="language-javascript">$("input.large").inputSpinner({groupClass: "input-group-lg"})</code></pre>
+    <pre><code class="language-html">&lt;input type="number" class="form-control-lg" value="1000000" data-decimals="0" min="0" max="2000000" step="1"/></code></pre>
     <h3>Attribute <span class="code">data-step-max</span> and looping the value</h3>
     <p>This Input starts from 0 when reaching 360.</p>
     <p>
@@ -284,8 +287,6 @@ <h2>Thats all for now</h2>
 <script src="./node_modules/prismjs/prism.js"></script>
 <script>
     $("input[type='number']").inputSpinner()
-    $("input.small").inputSpinner({groupClass: "input-group-sm"})
-    $("input.large").inputSpinner({groupClass: "input-group-lg"})
 </script>
 <script>
     var $inputChangeClass = $("#inputChangeClass")
diff --git a/src/bootstrap-input-spinner.js b/src/bootstrap-input-spinner.js
index a480fcb..587dcde 100644
--- a/src/bootstrap-input-spinner.js
+++ b/src/bootstrap-input-spinner.js
@@ -23,7 +23,7 @@
         var config = {
             decrementButton: "<strong>-</strong>", // button text
             incrementButton: "<strong>+</strong>", // ..
-            groupClass: "", // css class of the input-group (sizing with input-group-sm, input-group-lg)
+            groupClass: "", // css class of the resulting input-group
             buttonsClass: "btn-outline-secondary",
             buttonsWidth: "2.5rem",
             textAlign: "center",
@@ -127,7 +127,7 @@
             })
 
             function setValue(newValue, updateInput) {
-                if(updateInput === undefined) {
+                if (updateInput === undefined) {
                     updateInput = true
                 }
                 if (isNaN(newValue) || newValue === "") {
@@ -151,12 +151,12 @@
             function dispatchEvent($element, type) {
                 if (type) {
                     setTimeout(function () {
-                        var event;
-                        if(typeof(Event) === 'function') {
+                        var event
+                        if (typeof (Event) === 'function') {
                             event = new Event(type, {bubbles: true})
                         } else { // IE
-                            event = document.createEvent('Event');
-                            event.initEvent(type, true, true);
+                            event = document.createEvent('Event')
+                            event.initEvent(type, true, true)
                         }
                         $element[0].dispatchEvent(event)
                     })
@@ -164,7 +164,7 @@
             }
 
             function stepHandling(step) {
-                if(!$input[0].disabled) {
+                if (!$input[0].disabled) {
                     calcStep(step)
                     resetTimer()
                     autoDelayHandler = setTimeout(function () {
@@ -172,7 +172,7 @@
                             if (boostStepsCount > config.boostThreshold) {
                                 if (autoMultiplier) {
                                     calcStep(step * parseInt(boostMultiplier, 10))
-                                    if(boostMultiplier < 100000000) {
+                                    if (boostMultiplier < 100000000) {
                                         boostMultiplier = boostMultiplier * 1.1
                                     }
                                     if (stepMax) {
@@ -214,8 +214,19 @@
                 $input.prop("disabled", disabled)
                 $buttonIncrement.prop("disabled", disabled)
                 $buttonDecrement.prop("disabled", disabled)
-                $input.prop("class", "form-control " + $original.prop("class"))
-                $inputGroup.prop("class", "input-group " + $original.prop("class") + " " + config.groupClass)
+
+                var originalClass = $original.prop("class")
+                var groupClass = ""
+                if (/form-control-sm/g.test(originalClass)) {
+                    groupClass = "input-group-sm"
+                } else if (/form-control-lg/g.test(originalClass)) {
+                    groupClass = "input-group-lg"
+                }
+                var inputClass = originalClass.replace(/form-control(-(sm|lg))?/g, "")
+
+                $inputGroup.prop("class", "input-group " + groupClass + " " + config.groupClass)
+                $input.prop("class", "form-control " + inputClass)
+
                 // update the main attributes
                 min = parseFloat($original.prop("min")) || 0
                 max = isNaN($original.prop("max")) || $original.prop("max") === "" ? Infinity : parseFloat($original.prop("max"))
@@ -249,7 +260,7 @@
             callback(e)
         })
         element.addEventListener("touchstart", function (e) {
-            if(e.cancelable) {
+            if (e.cancelable) {
                 e.preventDefault()
             }
             callback(e)