diff --git a/pages/_docs/form-elements.md b/pages/_docs/form-elements.md
index 4ad1eacd6..a5e7c142c 100644
--- a/pages/_docs/form-elements.md
+++ b/pages/_docs/form-elements.md
@@ -5,22 +5,22 @@ title: Form Elements
 ### Classic Input
 
 {% example %}
-<div class="form-group">
+<div class="mb-2">
   <label class="form-label">Static</label>
 <div class="form-control-plaintext">Username</div>
 </div>
 
-<div class="form-group">
+<div class="mb-2">
   <label class="form-label">Text</label>
   <input type="text" class="form-control" name="example-text-input" placeholder="Text..">
 </div>
 
-<div class="form-group">
+<div class="mb-2">
    <label class="form-label">Disabled</label>
    <input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
           value="Well, she turned me into a newt." disabled>
 </div>
-<div class="form-group">
+<div class="mb-2">
    <label class="form-label">Readonly</label>
    <input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
           value="Well, how'd you become king, then?" readonly>
@@ -29,12 +29,12 @@ title: Form Elements
 
 ### Password and validation
 {% example %}
-<div class="form-group">
+<div class="mb-2">
    <label class="form-label">Password</label>
    <input type="password" class="form-control" name="example-password-input" placeholder="Password..">
 </div>
 
-<div class="form-group">
+<div class="mb-2">
    <label class="form-label">Valid State</label>
    <input type="text" class="form-control is-valid" name="example-text-input-valid"
           placeholder="Valid State..">
@@ -42,7 +42,7 @@ title: Form Elements
    <input type="text" class="form-control mt-3 state-valid" value="Valid state">
 </div>
 
-<div class="form-group">
+<div class="mb-2">
    <label class="form-label">Invalid State</label>
    <input type="text" class="form-control is-invalid" name="example-text-input-invalid"
           placeholder="Invalid State..">
@@ -54,7 +54,7 @@ title: Form Elements
 
 ### Select
 {% example %}
-<div class="form-group">
+<div class="mb-2">
    <label class="form-label">Country</label>
    <select class="form-control custom-select">
       <option value="">Germany</option>
@@ -66,7 +66,7 @@ title: Form Elements
 
 ### Textarea
 {% example %}
-<div class="form-group">
+<div class="mb-2">
    <label class="form-label">Textarea <span class="float-right text-muted-light">56/100</span></label>
    <textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
 </div>
@@ -84,27 +84,27 @@ title: Form Elements
 
 ### Custom Checkbox examples
 {% example %}
-<div class="form-group">
+<div class="mb-2">
    <label class="form-label">Icons input</label>
    {% include ui/input-selectgroup.html values="i:smartphone,i:tablet,i:monitor,i:x" class="w-100" type="radio" name="device" %}
 </div>
 
-<div class="form-group">
+<div class="mb-2">
    <label class="form-label">Icon input</label>
    {% include ui/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" class="selectgroup-pills" %}
 </div>
 
-<div class="form-group">
+<div class="mb-2">
    <label class="form-label">Your skills</label>
    {% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills" %}
 </div>
 
-<div class="form-group">
+<div class="mb-2">
    <label class="form-label">Size</label>
    {% include ui/input-selectgroup.html values="S,M,L,XL,XXL" type="radio" name="size" %}
 </div>
 
-<div class="form-group">
+<div class="mb-2">
    <label class="form-label">Shipping methods</label>
    {% include ui/input-selectgroup.html values="Unregistered,Priority Mail,Express Mail" class="selectgroup-vertical" type="radio" name="shipping-method" %}
 </div>
@@ -114,7 +114,7 @@ title: Form Elements
 {% example %}
 {% include parts/input-toggle.html %}
 
-<div class="form-group">
+<div class="mb-2">
    <div class="form-label">Toggle switch single</div>
    <label class="custom-control custom-switch">
       <input type="checkbox" class="custom-control-input">
@@ -125,7 +125,7 @@ title: Form Elements
 
 ### Radios
 {% example %}
-<div class="form-group">
+<div class="mb-2">
    <div class="form-label">Radios</div>
    <div class="custom-controls-stacked">
       <label class="custom-control custom-radio">
@@ -149,7 +149,7 @@ title: Form Elements
       </label>
    </div>
 </div>
-<div class="form-group">
+<div class="mb-2">
    <div class="form-label">Inline Radios</div>
    <div class="custom-controls-stacked">
       <label class="custom-control custom-radio custom-control-inline">
@@ -173,7 +173,7 @@ title: Form Elements
 
 ### Checkboxes
 {% example %}
-<div class="form-group">
+<div class="mb-2">
    <div class="form-label">Checkboxes</div>
    <div class="custom-controls-stacked">
       <label class="custom-control custom-checkbox">
@@ -198,7 +198,7 @@ title: Form Elements
       </label>
    </div>
 </div>
-<div class="form-group">
+<div class="mb-2">
    <div class="form-label">Inline Checkboxes</div>
    <div>
       <label class="custom-control custom-checkbox custom-control-inline">
@@ -222,7 +222,7 @@ title: Form Elements
 
 ### Ratios
 {% example %}
-<div class="form-group">
+<div class="mb-2">
    <label class="form-label">Ratios</label>
    <input type="range" class="custom-range" step="5" min="0" max="50">
 </div>
@@ -231,19 +231,19 @@ title: Form Elements
 ### Sample form
 {% example %}
 <fieldset class="form-fieldset">
-	<div class="form-group">
+	<div class="mb-2">
 		<label class="form-label">Full name<span class="form-required">*</span></label>
 		<input type="text" class="form-control"/>
 	</div>
-	<div class="form-group">
+	<div class="mb-2">
 		<label class="form-label">Company<span class="form-required">*</span></label>
 		<input type="text" class="form-control"/>
 	</div>
-	<div class="form-group">
+	<div class="mb-2">
 		<label class="form-label">Email<span class="form-required">*</span></label>
 		<input type="email" class="form-control"/>
 	</div>
-	<div class="form-group mb-0">
+	<div class="mb-2 mb-0">
 		<label class="form-label">Phone number</label>
 		<input type="tel" class="form-control"/>
 	</div>
@@ -252,7 +252,7 @@ title: Form Elements
 
 ### Input group
 {% example %}
-<div class="form-group">
+<div class="mb-2">
    <label class="form-label">Input group</label>
    <div class="input-group">
       <input type="text" class="form-control" placeholder="Search for&hellip;">
@@ -261,7 +261,7 @@ title: Form Elements
 						</span>
    </div>
 </div>
-<div class="form-group">
+<div class="mb-2">
    <label class="form-label">Input group buttons</label>
    <div class="input-group">
       <input type="text" class="form-control">
@@ -293,7 +293,7 @@ title: Form Elements
 
 ### Separated inputs
 {% example %}
-<div class="form-group">
+<div class="mb-2">
    <label class="form-label">Separated inputs</label>
    <div class="row row-xs">
       <div class="col">
@@ -307,22 +307,22 @@ title: Form Elements
 
 ### Custom Input examples
 {% example %}
-<div class="form-group">
+<div class="mb-2">
    <label class="form-label">Username</label>
    {% include ui/input-group.html prepend="@" placeholder="username" %}
 </div>
 
-<div class="form-group">
+<div class="mb-2">
    <label class="form-label">Subdomain</label>
    {% include ui/input-group.html append=".tabler.io" placeholder="subdomain" %}
 </div>
 
-<div class="form-group">
+<div class="mb-2">
    <label class="form-label">Your vanity URL</label>
    {% include ui/input-group.html prepend="https://example.com/users/" %}
 </div>
 
-<div class="form-group">
+<div class="mb-2">
    <label class="form-label">Price</label>
    {% include ui/input-group.html prepend="$" append=".00" %}
 </div>
@@ -330,7 +330,7 @@ title: Form Elements
 
 ### Date component
 {% example %}
-<div class="form-group">
+<div class="mb-2">
    <label class="form-label">Date of birth</label>
    <div class="row row-xs">
       <div class="col-5">
@@ -370,7 +370,7 @@ title: Form Elements
 
 ### Input with button
 {% example %}
-<div class="form-group">
+<div class="mb-2">
    <label class="form-label">Button input</label>
    <div class="input-group">
       <div class="input-group-prepend">
diff --git a/pages/_includes/cards/book-hotel.html b/pages/_includes/cards/book-hotel.html
index ab907f042..181a65517 100644
--- a/pages/_includes/cards/book-hotel.html
+++ b/pages/_includes/cards/book-hotel.html
@@ -4,7 +4,7 @@
     </div>
     <div class="card-body">
         <form>
-            <div class="form-group">
+            <div class="mb-2">
                 <label class="form-label">Check-in</label>
                 <div class="input-group">
                     <input type="text" class="form-control" placeholder="Pick a date">
@@ -16,7 +16,7 @@
                 </div>
             </div>
 
-            <div class="form-group">
+            <div class="mb-2">
                 <label class="form-label">Check-out</label>
                 <div class="input-group">
                     <input type="text" class="form-control" placeholder="Pick a date">
@@ -30,7 +30,7 @@
 
             <div class="row">
                 <div class="col-6">
-                    <div class="form-group">
+                    <div class="mb-2">
                         <label class="form-label">Adults</label>
                         <div class="input-group">
                             <div class="input-group-prepend">
@@ -43,7 +43,7 @@
                     </div>
                 </div>
                 <div class="col-6">
-                    <div class="form-group">
+                    <div class="mb-2">
                         <label class="form-label">Children</label>
                         <div class="input-group">
                             <div class="input-group-prepend">
@@ -67,4 +67,4 @@
             <button type="submit" class="btn btn-primary btn-block">Book Hotel now</button>
         </form>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/pages/_includes/cards/forgot.html b/pages/_includes/cards/forgot.html
index cca206a23..c85209778 100644
--- a/pages/_includes/cards/forgot.html
+++ b/pages/_includes/cards/forgot.html
@@ -4,7 +4,7 @@
       <div class="card-title">Forgot password</div>
 
       <p class="text-muted">Enter your email address and your password will be reset and emailed to you.</p>
-      <div class="form-group">
+      <div class="mb-2">
          <label class="form-label" for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
       </div>
diff --git a/pages/_includes/cards/login.html b/pages/_includes/cards/login.html
index 58ecfb8e7..2b1114214 100644
--- a/pages/_includes/cards/login.html
+++ b/pages/_includes/cards/login.html
@@ -3,19 +3,19 @@
    <div class="card-body p-6">
       <div class="card-title">Login to your account</div>
 
-      <div class="form-group">
+      <div class="mb-2">
          <label class="form-label">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                 placeholder="Enter email" autocomplete="off">
       </div>
-      <div class="form-group">
+      <div class="mb-2">
          <a href="{{ site.base }}/forgot-password.html" class="float-right small">I forgot password</a>
          <label class="form-label">
             Password
          </label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" autocomplete="off">
       </div>
-      <div class="form-group">
+      <div class="mb-2">
          <label class="custom-control custom-checkbox">
             <input type="checkbox" class="custom-control-input" {{ site.base }}/>
             <span class="custom-control-label">Remember me</span>
diff --git a/pages/_includes/cards/profile-edit-big.html b/pages/_includes/cards/profile-edit-big.html
index 152ab2cec..d67f21d02 100644
--- a/pages/_includes/cards/profile-edit-big.html
+++ b/pages/_includes/cards/profile-edit-big.html
@@ -4,55 +4,55 @@
 
       <div class="row">
          <div class="col-md-5">
-            <div class="form-group">
+            <div class="mb-2">
                <label class="form-label">Company</label>
                <input type="text" class="form-control" disabled="" placeholder="Company" value="Creative Code Inc.">
             </div>
          </div>
          <div class="col-sm-6 col-md-3">
-            <div class="form-group">
+            <div class="mb-2">
                <label class="form-label">Username</label>
                <input type="text" class="form-control" placeholder="Username" value="michael23">
             </div>
          </div>
          <div class="col-sm-6 col-md-4">
-            <div class="form-group">
+            <div class="mb-2">
                <label class="form-label">Email address</label>
                <input type="email" class="form-control" placeholder="Email">
             </div>
          </div>
          <div class="col-sm-6 col-md-6">
-            <div class="form-group">
+            <div class="mb-2">
                <label class="form-label">First Name</label>
                <input type="text" class="form-control" placeholder="Company" value="Chet">
             </div>
          </div>
          <div class="col-sm-6 col-md-6">
-            <div class="form-group">
+            <div class="mb-2">
                <label class="form-label">Last Name</label>
                <input type="text" class="form-control" placeholder="Last Name" value="Faker">
             </div>
          </div>
          <div class="col-md-12">
-            <div class="form-group">
+            <div class="mb-2">
                <label class="form-label">Address</label>
                <input type="text" class="form-control" placeholder="Home Address" value="Melbourne, Australia">
             </div>
          </div>
          <div class="col-sm-6 col-md-4">
-            <div class="form-group">
+            <div class="mb-2">
                <label class="form-label">City</label>
                <input type="text" class="form-control" placeholder="City" value="Melbourne">
             </div>
          </div>
          <div class="col-sm-6 col-md-3">
-            <div class="form-group">
+            <div class="mb-2">
                <label class="form-label">Postal Code</label>
                <input type="number" class="form-control" placeholder="ZIP Code">
             </div>
          </div>
          <div class="col-md-5">
-            <div class="form-group">
+            <div class="mb-2">
                <label class="form-label">Country</label>
                <select class="form-control custom-select">
                   <option value="">Germany</option>
@@ -60,7 +60,7 @@
             </div>
          </div>
          <div class="col-md-12">
-            <div class="form-group mb-0">
+            <div class="mb-2 mb-0">
                <label class="form-label">About Me</label>
                <textarea rows="5" class="form-control" placeholder="Here can be your description" value="Mike">Oh so, your weak rhyme
 You doubt I'll bother, reading into it
diff --git a/pages/_includes/cards/profile-edit.html b/pages/_includes/cards/profile-edit.html
index b29a4d4a7..09f37832a 100644
--- a/pages/_includes/cards/profile-edit.html
+++ b/pages/_includes/cards/profile-edit.html
@@ -9,24 +9,24 @@
                <span class="avatar avatar-lg" style="background-image: url({{ site.data.people[11].photo }})"></span>
             </div>
             <div class="col">
-               <div class="form-group">
+               <div class="mb-2">
                   <label class="form-label">Email-Address</label>
                   <input class="form-control" placeholder="your-email@domain.com"/>
                </div>
             </div>
          </div>
 
-         <div class="form-group">
+         <div class="mb-2">
             <label class="form-label">Bio</label>
             <textarea class="form-control" rows="5">Big belly rude boy, million dollar hustler. Unemployed.</textarea>
          </div>
 
-         <div class="form-group">
+         <div class="mb-2">
             <label class="form-label">Email-Address</label>
             <input class="form-control" placeholder="your-email@domain.com"/>
          </div>
 
-         <div class="form-group">
+         <div class="mb-2">
             <label class="form-label">Password</label>
             <input type="password" class="form-control" value="password"/>
          </div>
diff --git a/pages/_includes/cards/register.html b/pages/_includes/cards/register.html
index c71a55446..85bc742c7 100644
--- a/pages/_includes/cards/register.html
+++ b/pages/_includes/cards/register.html
@@ -2,19 +2,19 @@
     <div class="card-body p-6">
         <div class="card-title">Create new account</div>
 
-        <div class="form-group">
+        <div class="mb-2">
             <label class="form-label">Name</label>
             <input type="text" class="form-control" placeholder="Enter name">
         </div>
-        <div class="form-group">
+        <div class="mb-2">
             <label class="form-label">Email address</label>
             <input type="email" class="form-control" placeholder="Enter email">
         </div>
-        <div class="form-group">
+        <div class="mb-2">
             <label class="form-label">Password</label>
             <input type="password" class="form-control" placeholder="Password">
         </div>
-        <div class="form-group">
+        <div class="mb-2">
             <label class="custom-control custom-checkbox">
                 <input type="checkbox" class="custom-control-input"{{ site.base }}/>
                 <span class="custom-control-label">Agree the <a href="terms.html">terms and policy</a></span>
@@ -29,4 +29,4 @@
 
 <div class="text-center text-muted">
     Already have account? <a href="{{ site.base }}/login.html">Sign in</a>
-</div>
\ No newline at end of file
+</div>
diff --git a/pages/_includes/forms/form-elements-2.html b/pages/_includes/forms/form-elements-2.html
index fb6698a51..fbc839061 100644
--- a/pages/_includes/forms/form-elements-2.html
+++ b/pages/_includes/forms/form-elements-2.html
@@ -28,7 +28,7 @@
 </div>
 <div class="mb-2">
    <label class="form-label">Ratios</label>
-   <input type="range" class="custom-range" step="5" min="0" max="50">
+   <input type="range" class="form-range" step="5" min="0" max="50">
 </div>
 <div class="mb-2">
    <label class="form-label">Size</label>
@@ -53,37 +53,3 @@
    {% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills" %}
 </div>
 
-{% include parts/input-toggle.html %}
-
-<div class="mb-2">
-   <div class="form-label">Toggle switch single</div>
-   <label class="custom-control custom-switch">
-      <input type="checkbox" class="custom-control-input">
-      <div class="custom-control-label">I agree with terms and conditions</div>
-   </label>
-</div>
-
-<div class="mb-2">
-   <div class="form-label">Radios</div>
-   <div class="custom-controls-stacked">
-      <label class="custom-control custom-radio">
-         <input type="radio" class="custom-control-input" name="example-radios" value="option1"
-                checked>
-         <div class="custom-control-label">Option 1</div>
-      </label>
-      <label class="custom-control custom-radio">
-         <input type="radio" class="custom-control-input" name="example-radios" value="option2">
-         <div class="custom-control-label">Option 2</div>
-      </label>
-      <label class="custom-control custom-radio">
-         <input type="radio" class="custom-control-input" name="example-radios" value="option3"
-                disabled>
-         <div class="custom-control-label">Option Disabled</div>
-      </label>
-      <label class="custom-control custom-radio">
-         <input type="radio" class="custom-control-input" name="example-radios2" value="option4"
-                disabled checked>
-         <div class="custom-control-label">Option Disabled Checked</div>
-      </label>
-   </div>
-</div>
diff --git a/pages/_includes/forms/form-elements-3.html b/pages/_includes/forms/form-elements-3.html
index e29b8f6b2..d015efdfd 100644
--- a/pages/_includes/forms/form-elements-3.html
+++ b/pages/_includes/forms/form-elements-3.html
@@ -1,68 +1,42 @@
+<div class="mb-2">
+   <div class="form-label">Radios</div>
+   <div>
+      {% include ui/form/check.html title="Option 1" type="radio" %}
+      {% include ui/form/check.html title="Option 2" type="radio" %}
+      {% include ui/form/check.html title="Option 3" type="radio" %}
+   </div>
+</div>
+
 <div class="mb-2">
    <div class="form-label">Inline Radios</div>
-   <div class="custom-controls-stacked">
-      <label class="custom-control custom-radio custom-control-inline">
-         <input type="radio" class="custom-control-input" name="example-inline-radios"
-                value="option1" checked>
-         <span class="custom-control-label">Option 1</span>
-      </label>
-      <label class="custom-control custom-radio custom-control-inline">
-         <input type="radio" class="custom-control-input" name="example-inline-radios"
-                value="option2">
-         <span class="custom-control-label">Option 2</span>
-      </label>
-      <label class="custom-control custom-radio custom-control-inline">
-         <input type="radio" class="custom-control-input" name="example-inline-radios"
-                value="option3">
-         <span class="custom-control-label">Option 3</span>
-      </label>
+   <div>
+      {% include ui/form/check.html title="Option 1" type="radio" inline=true %}
+      {% include ui/form/check.html title="Option 2" type="radio" inline=true %}
+      {% include ui/form/check.html title="Option 3" type="radio" inline=true %}
    </div>
 </div>
 <div class="mb-2">
    <div class="form-label">Checkboxes</div>
-   <div class="custom-controls-stacked">
-      <label class="custom-control custom-checkbox">
-         <input type="checkbox" class="custom-control-input" name="example-checkbox1" value="option1"
-                checked>
-         <span class="custom-control-label">Option 1</span>
-      </label>
-      <label class="custom-control custom-checkbox">
-         <input type="checkbox" class="custom-control-input" name="example-checkbox2"
-                value="option2">
-         <span class="custom-control-label">Option 2</span>
-      </label>
-      <label class="custom-control custom-checkbox">
-         <input type="checkbox" class="custom-control-input" name="example-checkbox3" value="option3"
-                disabled>
-         <span class="custom-control-label">Option Disabled</span>
-      </label>
-      <label class="custom-control custom-checkbox">
-         <input type="checkbox" class="custom-control-input" name="example-checkbox4" value="option4"
-                checked disabled>
-         <span class="custom-control-label">Option Disabled Checked</span>
-      </label>
+   <div>
+      {% include ui/form/check.html type="checkbox" %}
+      {% include ui/form/check.html type="checkbox" disabled=true %}
+      {% include ui/form/check.html type="checkbox" checked=true %}
    </div>
 </div>
 <div class="mb-2">
    <div class="form-label">Inline Checkboxes</div>
    <div>
-      <label class="custom-control custom-checkbox custom-control-inline">
-         <input type="checkbox" class="custom-control-input" name="example-inline-checkbox1"
-                value="option1" checked>
-         <span class="custom-control-label">Option 1</span>
-      </label>
-      <label class="custom-control custom-checkbox custom-control-inline">
-         <input type="checkbox" class="custom-control-input" name="example-inline-checkbox2"
-                value="option2">
-         <span class="custom-control-label">Option 2</span>
-      </label>
-      <label class="custom-control custom-checkbox custom-control-inline">
-         <input type="checkbox" class="custom-control-input" name="example-inline-checkbox3"
-                value="option3">
-         <span class="custom-control-label">Option 3</span>
-      </label>
+      {% include ui/form/check.html inline=true title="Option 1" type="checkbox" %}
+      {% include ui/form/check.html inline=true title="Option 2" type="checkbox" disabled=true %}
+      {% include ui/form/check.html inline=true title="Option 3" type="checkbox" checked=true %}
    </div>
 </div>
+{% include parts/input-toggle.html %}
+
+<div class="mb-2">
+   <div class="form-label">Toggle switch single</div>
+   {% include ui/form/check.html title="I agree with terms and conditions" switch=true %}
+</div>
 <div class="mb-2">
    <div class="form-label">Bootstrap's Custom File Input</div>
    <div class="custom-file">
diff --git a/pages/_includes/layout/customize.html b/pages/_includes/layout/customize.html
index 17084a20c..4c80b8f5a 100644
--- a/pages/_includes/layout/customize.html
+++ b/pages/_includes/layout/customize.html
@@ -1,33 +1,33 @@
 <form action="#" class="js-layout-form">
-   <div class="form-group">
+   <div class="mb-2">
       <label class="form-label">Color scheme</label>
       {% include ui/input-selectgroup.html name="color-scheme" values="light,dark" type="radio" class="w-100p" %}
    </div>
-   <div class="form-group">
+   <div class="mb-2">
       <label class="form-label">Nav position</label>
       {% include ui/input-selectgroup.html name="nav-position" values="top,side" type="radio" class="w-100p" %}
    </div>
-   <div class="form-group">
+   <div class="mb-2">
       <label class="form-label">Header color</label>
       {% include ui/input-selectgroup.html name="header-color" values="light,dark" type="radio" class="w-100p" %}
    </div>
-   <!--<div class="form-group">-->
+   <!--<div class="mb-2">-->
    <!--<label class="form-label">Header fixed</label>-->
    <!--{% include ui/input-selectgroup.html name="header-fixed" values="fixed,default" type="radio" class="w-100p" %}-->
    <!--</div>-->
-   <div class="form-group">
+   <div class="mb-2">
       <label class="form-label">Sidebar position</label>
       {% include ui/input-selectgroup.html name="sidebar-position" values="left,right" type="radio" class="w-100p" %}
    </div>
-   <div class="form-group">
+   <div class="mb-2">
       <label class="form-label">Sidebar size</label>
       {% include ui/input-selectgroup.html name="sidebar-size" values="default,folded" type="radio" class="w-100p" %}
    </div>
-   <div class="form-group">
+   <div class="mb-2">
       <label class="form-label">Sidebar color</label>
       {% include ui/input-selectgroup.html name="sidebar-color" values="light,dark" type="radio" class="w-100p" %}
    </div>
-   <div class="form-group">
+   <div class="mb-2">
       <label class="form-label">Sidebar fixed</label>
       {% include ui/input-selectgroup.html name="sidebar-fixed" values="fixed,default" type="radio" class="w-100p" %}
    </div>
diff --git a/pages/_includes/layout/page-title.html b/pages/_includes/layout/page-title.html
index 512f5af75..41c62aeb7 100644
--- a/pages/_includes/layout/page-title.html
+++ b/pages/_includes/layout/page-title.html
@@ -11,7 +11,7 @@
 
 		{% if page.page-right == "date" %}
 		<form class="form-inline">
-			<div class="form-group">
+			<div class="mb-2">
 				<div class="input-group">
 					<input type="text" class="form-control form-control-light" placeholder="09/10/2018">
 					<div class="input-group-append">
diff --git a/pages/_includes/parts/form-fieldset.html b/pages/_includes/parts/form-fieldset.html
index 6c81d5455..941c2e1c9 100644
--- a/pages/_includes/parts/form-fieldset.html
+++ b/pages/_includes/parts/form-fieldset.html
@@ -1,18 +1,18 @@
 <fieldset class="form-fieldset">
-	<div class="form-group">
+	<div class="mb-2">
 		<label class="form-label">Full name<span class="form-required">*</span></label>
 		<input type="text" class="form-control"{{ site.base }}/>
 	</div>
-	<div class="form-group">
+	<div class="mb-2">
 		<label class="form-label">Company<span class="form-required">*</span></label>
 		<input type="text" class="form-control"{{ site.base }}/>
 	</div>
-	<div class="form-group">
+	<div class="mb-2">
 		<label class="form-label">Email<span class="form-required">*</span></label>
 		<input type="email" class="form-control"{{ site.base }}/>
 	</div>
-	<div class="form-group mb-0">
+	<div class="mb-2 mb-0">
 		<label class="form-label">Phone number</label>
 		<input type="tel" class="form-control"{{ site.base }}/>
 	</div>
-</fieldset>
\ No newline at end of file
+</fieldset>
diff --git a/pages/_includes/parts/input-color.html b/pages/_includes/parts/input-color.html
index 5ba65a12a..60463a750 100644
--- a/pages/_includes/parts/input-color.html
+++ b/pages/_includes/parts/input-color.html
@@ -1,4 +1,4 @@
-<div class="form-group">
+<div class="mb-2">
 	<label class="form-label">Color Input</label>
 	<div class="row row-xs">
 		{% for color in site.colors limit: 9 offset: 1 %}
diff --git a/pages/_includes/parts/input-icon.html b/pages/_includes/parts/input-icon.html
index f74a9c696..bfa27d2f1 100644
--- a/pages/_includes/parts/input-icon.html
+++ b/pages/_includes/parts/input-icon.html
@@ -1,4 +1,4 @@
-<div class="form-group">
+<div class="mb-2">
 	<label class="form-label">Icon input</label>
 	<div class="input-icon mb-3">
 		<input type="text" class="form-control" placeholder="Search for&hellip;">
diff --git a/pages/_includes/parts/input-image.html b/pages/_includes/parts/input-image.html
index 158d411f0..f91500287 100644
--- a/pages/_includes/parts/input-image.html
+++ b/pages/_includes/parts/input-image.html
@@ -1,5 +1,5 @@
 {% assign limit = include.limit | default: 6 %}
-<div class="form-group">
+<div class="mb-2">
 	<label class="form-label">Image Check</label>
 	<div class="row row-xs">
 		{% for photo in site.data.photos limit: limit offset: 30 %}
diff --git a/pages/_includes/parts/input-toggle.html b/pages/_includes/parts/input-toggle.html
index 88932140e..9950b5594 100644
--- a/pages/_includes/parts/input-toggle.html
+++ b/pages/_includes/parts/input-toggle.html
@@ -1,15 +1,6 @@
-<div class="form-group">
+<div class="mb-2">
 	<div class="form-label">Toggle switches</div>
-   <label class="custom-control custom-switch">
-      <input type="checkbox" class="custom-control-input">
-      <div class="custom-control-label">Option 1</div>
-   </label>
-   <label class="custom-control custom-switch">
-      <input type="checkbox" class="custom-control-input">
-      <div class="custom-control-label">Option 2</div>
-   </label>
-   <label class="custom-control custom-switch">
-      <input type="checkbox" class="custom-control-input">
-      <div class="custom-control-label">Option 3</div>
-   </label>
+   {% include ui/form/check.html switch=true title="Option 1" checked=true %}
+   {% include ui/form/check.html switch=true title="Option 2" %}
+   {% include ui/form/check.html switch=true title="Option 3" %}
 </div>
diff --git a/pages/_includes/ui/form/check.html b/pages/_includes/ui/form/check.html
new file mode 100644
index 000000000..37e3728b5
--- /dev/null
+++ b/pages/_includes/ui/form/check.html
@@ -0,0 +1,17 @@
+{% assign type = include.type | default: 'checkbox' %}
+{% assign checked = include.checked | default: false %}
+{% assign disabled = include.disabled | default: false %}
+{% assign switch = include.switch | default: false %}
+{% assign title = include.title | default: false %}
+{% unless title %}
+   {% assign title = '' %}
+   {% if disabled %}{% assign title = title | append: ' disabled' %}{% endif %}
+   {% if checked %}{% assign title = title | append: ' checked' %}{% endif %}
+   {% if switch %}{% assign title = title | append: ' switch' %}{% endif %}
+   {% assign title = title | append: ' ' | append: type %}
+   {% assign title = title | append: ' input' | lstrip | capitalize %}
+{% endunless %}
+<label class="form-check{% if include.inline %} form-check-inline{% endif %}{% if switch %} form-switch{% endif %}">
+   <input class="form-check-input" type="{{ type }}"{% if checked %} checked{% endif %}{% if disabled %} disabled{% endif %}>
+   <span class="form-check-label">{{ title }}</span>
+</label>
diff --git a/pages/email.html b/pages/email.html
index a7aa9548f..b3da92398 100644
--- a/pages/email.html
+++ b/pages/email.html
@@ -47,7 +47,7 @@ page-title: Crypto currencies
             <div class="card-body">
 
                <form action="">
-                  <div class="form-group">
+                  <div class="mb-2">
                      <div class="row align-items-center">
                         <label class="col-sm-2">To:</label>
                         <div class="col-sm-10">
@@ -56,7 +56,7 @@ page-title: Crypto currencies
                      </div>
                   </div>
 
-                  <div class="form-group">
+                  <div class="mb-2">
                      <div class="row align-items-center">
                         <label class="col-sm-2">Subject:</label>
                         <div class="col-sm-10">
diff --git a/pages/users-list.html b/pages/users-list.html
index d1c9cc467..6ac06d8e2 100644
--- a/pages/users-list.html
+++ b/pages/users-list.html
@@ -9,15 +9,15 @@ done: true
    <div class="col-lg-4">
       <form class="card">
          <div class="card-body">
-            <div class="form-group">
+            <div class="mb-2">
                <div class="form-label">Filter</div>
                <input type="text" class="form-control"/>
             </div>
-            <div class="form-group">
+            <div class="mb-2">
                <div class="form-label">Calendar</div>
                <input type="text" class="form-control"/>
             </div>
-            <div class="form-group">
+            <div class="mb-2">
                <div class="form-label">Group</div>
                <div class="selectgroup w-100">
                   <label class="selectgroup-item">
@@ -39,7 +39,7 @@ done: true
                   </label>
                </div>
             </div>
-            <div class="form-group">
+            <div class="mb-2">
                <div class="form-label">Country</div>
                <select class="custom-select form-control">
                   <option value="">United States</option>
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 3ad8ed34b..7fc7e0b35 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -283,6 +283,16 @@ $dropdown-border-color: $border-color !default;
 $card-border-radius: $border-radius !default;
 $input-border-radius: $border-radius !default;
 
+
+//Forms
+$form-check-input-width: 1em;
+$form-check-input-border: 1px solid $border-color;
+$form-check-input-border-radius: $border-radius;
+$form-check-input-checked-bg-size: .75rem;
+$form-check-input-checked-border-color: currentColor;
+
+$form-range-track-height: .25rem;
+
 $form-feedback-icon-valid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $green + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'><polyline points='20 6 9 17 4 12'></polyline></svg>"), "#", "%23") !default;
 $form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $red + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>"), "#", "%23") !default;
 
diff --git a/scss/ui/_inputs.scss b/scss/ui/_inputs.scss
index 400706903..c978d872b 100644
--- a/scss/ui/_inputs.scss
+++ b/scss/ui/_inputs.scss
@@ -11,7 +11,7 @@ textarea {
   font-weight: 600;
 }
 
-.form-group {
+.mb-2 {
   display: block;
 
   &.row {