diff --git a/README.md b/README.md
index 24f78ba..ab3d2ba 100644
--- a/README.md
+++ b/README.md
@@ -1,14 +1,34 @@
-Awesome Bootstrap Checkbox
-==========================
+# 🤘 Awesome Bootstrap Checkbox
+
+[![NPM version](https://img.shields.io/npm/v/awesome-bootstrap-checkbox.svg?style=flat)](https://www.npmjs.com/package/awesome-bootstrap-checkbox)
+[![NPM downloads](https://img.shields.io/npm/dm/awesome-bootstrap-checkbox.svg?style=flat)](https://www.npmjs.com/package/awesome-bootstrap-checkbox)
+[![Dependency Status](https://img.shields.io/david/dev/flatlogic/awesome-bootstrap-checkbox.svg?branch=master&style=flat)](https://www.npmjs.com/package/awesome-bootstrap-checkbox)
+[![Join the chat at https://gitter.im/flatlogic/awesome-bootstrap-checkbox](https://badges.gitter.im/flatlogic/awesome-bootstrap-checkbox.svg)](https://gitter.im/flatlogic/awesome-bootstrap-checkbox?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+
+[View Demo](http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/) | [Download](https://github.com/flatlogic/awesome-bootstrap-checkbox.git) | [More templates](https://flatlogic.com/templates) | [Support forum](https://flatlogic.com/forum)
 
 [Font Awesome][] [Bootstrap][] Checkboxes & Radios plugin. Pure CSS way to make inputs look prettier. **No Javascript!**
 
-**[Demo][]**
+For **[Bootstrap 4 version](https://getbootstrap.com/docs/4.6/getting-started/introduction/)** please checkout [bump-to-bootstrap4][] branch
+
+For **[Bootstrap 5 version](https://getbootstrap.com/)** please checkout [bump-to-bootstrap5](https://github.com/flatlogic/awesome-bootstrap-checkbox/tree/bump-to-bootstrap5) branch
+
+Check out our React/Vue/Angular/Node.js boilerplates
+-----------
+[Flatlogic Templates](https://flatlogic.com/templates) - 💥Free and open-source application boilerplates built with Bootstrap 5, React, Vue, Angular, Node.js
 
 Use
 ------------
 
-First just include **awesome-bootstrap-checkbox.css** somewhere in your HTML, or add the equivalent files to your [Sass](#using-sass) / [Less](#using-less) configuration.
+To install latest version via NPM simply run:
+```shell
+$ npm install awesome-bootstrap-checkbox # for Bootstrap 4 version
+$ npm install awesome-bootstrap-checkbox@0.3.7 # for Bootstrap 3 version
+```
+
+There is a separate [README.md][] file for **[Bootstrap 4 version][]**.
+
+Then just include **awesome-bootstrap-checkbox.css** somewhere in your HTML, or add the equivalent files to your [Sass](#using-sass) / [Less](#using-less) configuration.
 Next, everything is based on code convention. Here is checkbox markup from Bootstrap site:
 
 ````html
@@ -163,6 +183,23 @@ input[type="radio"].styled:checked label:after,
 }
 ````
 
+How can I support developers?
+------------------------------
+- Star our GitHub repo :star:
+- Create pull requests, submit bugs, suggest new features or documentation updates :wrench:
+- Follow us on [Twitter](https://twitter.com/flatlogic) :feet:
+- Like our page on [Facebook](https://www.facebook.com/flatlogic/) :thumbsup:
+
+Support
+------------------------------
+For any additional information please go to our [**support forum**](https://flatlogic.com/forum) and raise your questions or feedback provide there. We highly appreciate your participation!
+
+More from Flatlogic
+------------------------------
+- [React Native Starter](https://flatlogic.com/templates/react-native) - 🚀 A powerful react native starter template that bootstraps development of your mobile application 
+- [Sing App Dashboard](https://flatlogic.com/templates/sing-app-html5) - 💥 Free and open-source admin dashboard template built with Bootstrap 4
+- [React Material Admin](https://flatlogic.com/templates/react-material-admin-full) - ⚡ Admin boilerplate made with React 17 and Material-UI 5
+
 Credits
 ------------
 
@@ -171,8 +208,11 @@ Based on the [Official Bootstrap Sass port][Bootstrap Sass] and the awesome [Fon
 
 [Demo]: http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/
 [Bootstrap]: http://getbootstrap.com/
+[Bootstrap 4 version]: https://getbootstrap.com/
+[bump-to-bootstrap4]: https://github.com/flatlogic/awesome-bootstrap-checkbox/tree/bump-to-bootstrap4
 [Bootstrap Sass]: https://github.com/twbs/bootstrap-sass
 [Font Awesome]: https://github.com/FortAwesome/Font-Awesome
 [Glyphicons]: http://getbootstrap.com/components/#glyphicons
 [Sass]: http://sass-lang.com/
 [Less]: http://lesscss.org/
+[README.md]: https://github.com/flatlogic/awesome-bootstrap-checkbox/tree/bump-to-bootstrap4
diff --git a/awesome-bootstrap-checkbox.css b/awesome-bootstrap-checkbox.css
index f4e6575..bb67207 100644
--- a/awesome-bootstrap-checkbox.css
+++ b/awesome-bootstrap-checkbox.css
@@ -34,11 +34,13 @@
   padding-top: 1px;
   font-size: 11px;
   color: #555555;
+  line-height: 1.4;
 }
 .checkbox input[type="checkbox"],
 .checkbox input[type="radio"] {
   opacity: 0;
   z-index: 1;
+  cursor: pointer;
 }
 .checkbox input[type="checkbox"]:focus + label::before,
 .checkbox input[type="radio"]:focus + label::before {
@@ -51,6 +53,21 @@
   font-family: "FontAwesome";
   content: "\f00c";
 }
+.checkbox input[type="checkbox"]:indeterminate + label::after,
+.checkbox input[type="radio"]:indeterminate + label::after {
+  display: block;
+  content: "";
+  width: 10px;
+  height: 3px;
+  background-color: #555555;
+  border-radius: 2px;
+  margin-left: -16.5px;
+  margin-top: 7px;
+}
+.checkbox input[type="checkbox"]:disabled,
+.checkbox input[type="radio"]:disabled {
+  cursor: not-allowed;
+}
 .checkbox input[type="checkbox"]:disabled + label,
 .checkbox input[type="radio"]:disabled + label {
   opacity: 0.65;
@@ -117,6 +134,61 @@
   color: #fff;
 }
 
+.checkbox-primary input[type="checkbox"]:indeterminate + label::before,
+.checkbox-primary input[type="radio"]:indeterminate + label::before {
+  background-color: #337ab7;
+  border-color: #337ab7;
+}
+
+.checkbox-primary input[type="checkbox"]:indeterminate + label::after,
+.checkbox-primary input[type="radio"]:indeterminate + label::after {
+  background-color: #fff;
+}
+
+.checkbox-danger input[type="checkbox"]:indeterminate + label::before,
+.checkbox-danger input[type="radio"]:indeterminate + label::before {
+  background-color: #d9534f;
+  border-color: #d9534f;
+}
+
+.checkbox-danger input[type="checkbox"]:indeterminate + label::after,
+.checkbox-danger input[type="radio"]:indeterminate + label::after {
+  background-color: #fff;
+}
+
+.checkbox-info input[type="checkbox"]:indeterminate + label::before,
+.checkbox-info input[type="radio"]:indeterminate + label::before {
+  background-color: #5bc0de;
+  border-color: #5bc0de;
+}
+
+.checkbox-info input[type="checkbox"]:indeterminate + label::after,
+.checkbox-info input[type="radio"]:indeterminate + label::after {
+  background-color: #fff;
+}
+
+.checkbox-warning input[type="checkbox"]:indeterminate + label::before,
+.checkbox-warning input[type="radio"]:indeterminate + label::before {
+  background-color: #f0ad4e;
+  border-color: #f0ad4e;
+}
+
+.checkbox-warning input[type="checkbox"]:indeterminate + label::after,
+.checkbox-warning input[type="radio"]:indeterminate + label::after {
+  background-color: #fff;
+}
+
+.checkbox-success input[type="checkbox"]:indeterminate + label::before,
+.checkbox-success input[type="radio"]:indeterminate + label::before {
+  background-color: #5cb85c;
+  border-color: #5cb85c;
+}
+
+.checkbox-success input[type="checkbox"]:indeterminate + label::after,
+.checkbox-success input[type="radio"]:indeterminate + label::after {
+  background-color: #fff;
+}
+
 .radio {
   padding-left: 20px;
 }
@@ -164,6 +236,7 @@
 .radio input[type="radio"] {
   opacity: 0;
   z-index: 1;
+  cursor: pointer;
 }
 .radio input[type="radio"]:focus + label::before {
   outline: thin dotted;
@@ -176,6 +249,9 @@
   -o-transform: scale(1, 1);
   transform: scale(1, 1);
 }
+.radio input[type="radio"]:disabled {
+  cursor: not-allowed;
+}
 .radio input[type="radio"]:disabled + label {
   opacity: 0.65;
 }
diff --git a/awesome-bootstrap-checkbox.less b/awesome-bootstrap-checkbox.less
index ace936c..ae32677 100644
--- a/awesome-bootstrap-checkbox.less
+++ b/awesome-bootstrap-checkbox.less
@@ -19,6 +19,19 @@
   }
 }
 
+.checkbox-variant-indeterminate(@parent, @color) {
+  .@{parent} input[type="checkbox"]:indeterminate + label,
+  .@{parent} input[type="radio"]:indeterminate + label {
+    &::before {
+      background-color: @color;
+      border-color: @color;
+    }
+    &::after {
+      background-color: #fff;
+    }
+  }
+}
+
 
 .checkbox{
   padding-left: 20px;
@@ -39,7 +52,7 @@
       margin-left: -20px;
       border: 1px solid @input-border;
       border-radius: 3px;
-      background-color: #fff;
+      background-color: @input-bg;
       .transition(~"border 0.15s ease-in-out, color 0.15s ease-in-out");
     }
 
@@ -55,6 +68,7 @@
       padding-top: 1px;
       font-size: 11px;
       color: @input-color;
+      line-height: 1.4;
     }
   }
 
@@ -62,6 +76,7 @@
   input[type="radio"]{
     opacity: 0;
     z-index: 1;
+    cursor: pointer;
 
     &:focus + label::before{
       .tab-focus();
@@ -72,6 +87,21 @@
       content: @check-icon;
     }
 
+    &:indeterminate + label::after{
+      display: block;
+      content: " ";
+      width: 10px;
+      height: 3px;
+      background-color: #555555;
+      border-radius: 2px;
+      margin-left: -16.5px;
+      margin-top: 7px;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
     &:disabled + label{
       opacity: 0.65;
 
@@ -98,6 +128,12 @@
 .checkbox-variant(checkbox-warning, @brand-warning);
 .checkbox-variant(checkbox-success, @brand-success);
 
+.checkbox-variant-indeterminate(checkbox-primary, @brand-primary);
+.checkbox-variant-indeterminate(checkbox-danger, @brand-danger);
+.checkbox-variant-indeterminate(checkbox-info, @brand-info);
+.checkbox-variant-indeterminate(checkbox-warning, @brand-warning);
+.checkbox-variant-indeterminate(checkbox-success, @brand-success);
+
 //
 // Radios
 // --------------------------------------------------
@@ -139,7 +175,7 @@
       margin-left: -20px;
       border: 1px solid @input-border;
       border-radius: 50%;
-      background-color: #fff;
+      background-color: @input-bg;
       .transition(border 0.15s ease-in-out);
     }
 
@@ -164,6 +200,7 @@
   input[type="radio"]{
     opacity: 0;
     z-index: 1;
+    cursor: pointer;
 
     &:focus + label::before{
       .tab-focus();
@@ -173,6 +210,10 @@
       .scale(1, 1);
     }
 
+    &:disabled{
+      cursor: not-allowed;
+    }
+
     &:disabled + label{
       opacity: 0.65;
 
diff --git a/awesome-bootstrap-checkbox.scss b/awesome-bootstrap-checkbox.scss
index 3979e42..2434f71 100644
--- a/awesome-bootstrap-checkbox.scss
+++ b/awesome-bootstrap-checkbox.scss
@@ -6,6 +6,7 @@
 $font-family-icon: 'FontAwesome' !default;
 $fa-var-check: "\f00c" !default;
 $check-icon: $fa-var-check !default;
+$abc-border-width: 1px !default;
 
 @mixin checkbox-variant($parent, $color) {
   #{$parent} input[type="checkbox"]:checked + label,
@@ -20,6 +21,20 @@ $check-icon: $fa-var-check !default;
   }
 }
 
+@mixin checkbox-variant-indeterminate($parent, $color) {
+  #{$parent} input[type="checkbox"]:indeterminate + label,
+  #{$parent} input[type="radio"]:indeterminate + label {
+    &::before {
+      background-color: $color;
+      border-color: $color;
+    }
+    &::after{
+      background-color: #fff;
+    }
+  }
+}
+
+
 
 .checkbox{
   padding-left: 20px;
@@ -38,9 +53,9 @@ $check-icon: $fa-var-check !default;
       height: 17px;
       left: 0;
       margin-left: -20px;
-      border: 1px solid $input-border;
+      border: $abc-border-width solid $input-border;
       border-radius: 3px;
-      background-color: #fff;
+      background-color: $input-bg;
       @include transition(border 0.15s ease-in-out, color 0.15s ease-in-out);
     }
 
@@ -56,6 +71,7 @@ $check-icon: $fa-var-check !default;
       padding-top: 1px;
       font-size: 11px;
       color: $input-color;
+      line-height: 1.4;
     }
   }
 
@@ -63,6 +79,7 @@ $check-icon: $fa-var-check !default;
   input[type="radio"] {
     opacity: 0;
     z-index: 1;
+    cursor: pointer;
 
     &:focus + label::before{
       @include tab-focus();
@@ -73,6 +90,21 @@ $check-icon: $fa-var-check !default;
       content: $check-icon;
     }
 
+    &:indeterminate + label::after{
+      display: block;
+      content: "";
+      width: 10px;
+      height: 3px;
+      background-color: #555555;
+      border-radius: 2px;
+      margin-left: -16.5px;
+      margin-top: 7px;
+    }
+
+    &:disabled{
+      cursor: not-allowed;
+    }
+
     &:disabled + label{
       opacity: 0.65;
 
@@ -99,6 +131,13 @@ $check-icon: $fa-var-check !default;
 @include checkbox-variant('.checkbox-warning', $brand-warning);
 @include checkbox-variant('.checkbox-success', $brand-success);
 
+
+@include checkbox-variant-indeterminate('.checkbox-primary', $brand-primary);
+@include checkbox-variant-indeterminate('.checkbox-danger', $brand-danger);
+@include checkbox-variant-indeterminate('.checkbox-info', $brand-info);
+@include checkbox-variant-indeterminate('.checkbox-warning', $brand-warning);
+@include checkbox-variant-indeterminate('.checkbox-success', $brand-success);
+
 //
 // Radios
 // --------------------------------------------------
@@ -138,9 +177,9 @@ $check-icon: $fa-var-check !default;
       height: 17px;
       left: 0;
       margin-left: -20px;
-      border: 1px solid $input-border;
+      border: $abc-border-width solid $input-border;
       border-radius: 50%;
-      background-color: #fff;
+      background-color: $input-bg;
       @include transition(border 0.15s ease-in-out);
     }
 
@@ -165,6 +204,7 @@ $check-icon: $fa-var-check !default;
   input[type="radio"]{
     opacity: 0;
     z-index: 1;
+    cursor: pointer;
 
     &:focus + label::before{
       @include tab-focus();
@@ -174,6 +214,10 @@ $check-icon: $fa-var-check !default;
       @include scale(1, 1);
     }
 
+    &:disabled{
+      cursor: not-allowed;
+    }
+
     &:disabled + label{
       opacity: 0.65;
 
diff --git a/demo/build.css b/demo/build.css
index 00c737d..793555e 100644
--- a/demo/build.css
+++ b/demo/build.css
@@ -1,3 +1,4 @@
+@charset "UTF-8";
 .checkbox {
   padding-left: 20px; }
   .checkbox label {
@@ -13,7 +14,7 @@
       height: 17px;
       left: 0;
       margin-left: -20px;
-      border: 1px solid #cccccc;
+      border: 1px solid #ccc;
       border-radius: 3px;
       background-color: #fff;
       -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
@@ -30,11 +31,13 @@
       padding-left: 3px;
       padding-top: 1px;
       font-size: 11px;
-      color: #555555; }
+      color: #555555;
+      line-height: 1.4; }
   .checkbox input[type="checkbox"],
   .checkbox input[type="radio"] {
     opacity: 0;
-    z-index: 1; }
+    z-index: 1;
+    cursor: pointer; }
     .checkbox input[type="checkbox"]:focus + label::before,
     .checkbox input[type="radio"]:focus + label::before {
       outline: thin dotted;
@@ -43,7 +46,20 @@
     .checkbox input[type="checkbox"]:checked + label::after,
     .checkbox input[type="radio"]:checked + label::after {
       font-family: "FontAwesome";
-      content: "\f00c"; }
+      content: ""; }
+    .checkbox input[type="checkbox"]:indeterminate + label::after,
+    .checkbox input[type="radio"]:indeterminate + label::after {
+      display: block;
+      content: "";
+      width: 10px;
+      height: 3px;
+      background-color: #555555;
+      border-radius: 2px;
+      margin-left: -16.5px;
+      margin-top: 7px; }
+    .checkbox input[type="checkbox"]:disabled,
+    .checkbox input[type="radio"]:disabled {
+      cursor: not-allowed; }
     .checkbox input[type="checkbox"]:disabled + label,
     .checkbox input[type="radio"]:disabled + label {
       opacity: 0.65; }
@@ -96,6 +112,46 @@
 .checkbox-success input[type="radio"]:checked + label::after {
   color: #fff; }
 
+.checkbox-primary input[type="checkbox"]:indeterminate + label::before,
+.checkbox-primary input[type="radio"]:indeterminate + label::before {
+  background-color: #337ab7;
+  border-color: #337ab7; }
+.checkbox-primary input[type="checkbox"]:indeterminate + label::after,
+.checkbox-primary input[type="radio"]:indeterminate + label::after {
+  background-color: #fff; }
+
+.checkbox-danger input[type="checkbox"]:indeterminate + label::before,
+.checkbox-danger input[type="radio"]:indeterminate + label::before {
+  background-color: #d9534f;
+  border-color: #d9534f; }
+.checkbox-danger input[type="checkbox"]:indeterminate + label::after,
+.checkbox-danger input[type="radio"]:indeterminate + label::after {
+  background-color: #fff; }
+
+.checkbox-info input[type="checkbox"]:indeterminate + label::before,
+.checkbox-info input[type="radio"]:indeterminate + label::before {
+  background-color: #5bc0de;
+  border-color: #5bc0de; }
+.checkbox-info input[type="checkbox"]:indeterminate + label::after,
+.checkbox-info input[type="radio"]:indeterminate + label::after {
+  background-color: #fff; }
+
+.checkbox-warning input[type="checkbox"]:indeterminate + label::before,
+.checkbox-warning input[type="radio"]:indeterminate + label::before {
+  background-color: #f0ad4e;
+  border-color: #f0ad4e; }
+.checkbox-warning input[type="checkbox"]:indeterminate + label::after,
+.checkbox-warning input[type="radio"]:indeterminate + label::after {
+  background-color: #fff; }
+
+.checkbox-success input[type="checkbox"]:indeterminate + label::before,
+.checkbox-success input[type="radio"]:indeterminate + label::before {
+  background-color: #5cb85c;
+  border-color: #5cb85c; }
+.checkbox-success input[type="checkbox"]:indeterminate + label::after,
+.checkbox-success input[type="radio"]:indeterminate + label::after {
+  background-color: #fff; }
+
 .radio {
   padding-left: 20px; }
   .radio label {
@@ -111,7 +167,7 @@
       height: 17px;
       left: 0;
       margin-left: -20px;
-      border: 1px solid #cccccc;
+      border: 1px solid #ccc;
       border-radius: 50%;
       background-color: #fff;
       -webkit-transition: border 0.15s ease-in-out;
@@ -138,7 +194,8 @@
       transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
   .radio input[type="radio"] {
     opacity: 0;
-    z-index: 1; }
+    z-index: 1;
+    cursor: pointer; }
     .radio input[type="radio"]:focus + label::before {
       outline: thin dotted;
       outline: 5px auto -webkit-focus-ring-color;
@@ -148,6 +205,8 @@
       -ms-transform: scale(1, 1);
       -o-transform: scale(1, 1);
       transform: scale(1, 1); }
+    .radio input[type="radio"]:disabled {
+      cursor: not-allowed; }
     .radio input[type="radio"]:disabled + label {
       opacity: 0.65; }
       .radio input[type="radio"]:disabled + label::before {
@@ -192,11 +251,13 @@
 
 input[type="checkbox"].styled:checked + label:after,
 input[type="radio"].styled:checked + label:after {
-  font-family: 'FontAwesome';
-  content: "\f00c"; }
+  font-family: "FontAwesome";
+  content: ""; }
 input[type="checkbox"] .styled:checked + label::before,
 input[type="radio"] .styled:checked + label::before {
   color: #fff; }
 input[type="checkbox"] .styled:checked + label::after,
 input[type="radio"] .styled:checked + label::after {
   color: #fff; }
+
+/*# sourceMappingURL=build.css.map */
diff --git a/demo/build.less b/demo/build.less
index 5bb0f07..dbcb4cd 100644
--- a/demo/build.less
+++ b/demo/build.less
@@ -1,6 +1,6 @@
 @import "../bower_components/bootstrap/less/variables";
 @import "../bower_components/bootstrap/less/mixins";
 
-@import "../awesome-bootstrap-checkbox";
+@import "../awesome-bootstrap-checkbox.less";
 
 @import "../bower_components/Font-Awesome/less/variables";
diff --git a/demo/build.scss b/demo/build.scss
index 2efb4a3..137f90b 100644
--- a/demo/build.scss
+++ b/demo/build.scss
@@ -3,4 +3,4 @@
 
 @import "../bower_components/Font-Awesome/scss/variables";
 
-@import "../awesome-bootstrap-checkbox";
\ No newline at end of file
+@import "../awesome-bootstrap-checkbox.scss";
\ No newline at end of file
diff --git a/demo/index.html b/demo/index.html
index ffa4e78..d1a15a3 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -3,13 +3,16 @@
 <head lang="en">
     <meta charset="UTF-8">
     <title>awesome bootstrap checkbox demo</title>
-    <link rel="stylesheet" href="bootstrap.css"/>
-    <link rel="stylesheet" href="../bower_components/Font-Awesome/css/font-awesome.css"/>
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/>
+    <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css"/>
     <link rel="stylesheet" href="build.css"/>
 </head>
 <body>
-<div class="container">
-    <h2>Checkboxes</h2>
+<div class="container my-5">
+    <h1 class="text-center">Awesome Bootstrap Checkbox v1.0.0</h1>
+    <p class="lead text-center">Pure CSS way to make inputs look prettier
+        <br>with <a href="https://getbootstrap.com/" target="_blank" rel="nofollow">Bootstrap 5</a> support and <strong><strong>No Javascript!</strong></strong></p>
+    <h2 class="mt-5">Checkboxes</h2>
     <form role="form">
         <div class="row">
             <div class="col-md-4">
@@ -18,66 +21,44 @@ <h2>Checkboxes</h2>
                         Basic
                     </legend>
                     <p>
-                        Supports bootstrap brand colors: <code>.checkbox-primary</code>, <code>.checkbox-info</code> etc.
+                        Supports bootstrap theme colors: <code>.abc-checkbox-primary</code>, <code>.abc-checkbox-info</code> etc.
                     </p>
-                    <div class="checkbox">
-                        <input id="checkbox1" class="styled" type="checkbox">
-                        <label for="checkbox1">
+                    <div class="form-check abc-checkbox">
+                        <input class="form-check-input" id="checkbox1" type="checkbox">
+                        <label class="form-check-label" for="checkbox1">
                             Default
                         </label>
                     </div>
-                    <div class="checkbox checkbox-primary">
-                        <input id="checkbox2" class="styled" type="checkbox" checked>
-                        <label for="checkbox2">
+                    <div class="form-check abc-checkbox abc-checkbox-primary">
+                        <input class="form-check-input" id="checkbox2" type="checkbox" checked>
+                        <label class="form-check-label" for="checkbox2">
                             Primary
                         </label>
                     </div>
-                    <div class="checkbox checkbox-success">
-                        <input id="checkbox3" class="styled" type="checkbox">
-                        <label for="checkbox3">
+                    <div class="form-check abc-checkbox abc-checkbox-success">
+                        <input class="form-check-input" id="checkbox3" type="checkbox">
+                        <label class="form-check-label" for="checkbox3">
                             Success
                         </label>
                     </div>
-                    <div class="checkbox checkbox-info">
-                        <input id="checkbox4" class="styled" type="checkbox">
-                        <label for="checkbox4">
+                    <div class="form-check abc-checkbox abc-checkbox-info">
+                        <input class="form-check-input" id="checkbox4" type="checkbox">
+                        <label class="form-check-label" for="checkbox4">
                             Info
                         </label>
                     </div>
-                    <div class="checkbox checkbox-warning">
-                        <input id="checkbox5" type="checkbox" class="styled" checked>
-                        <label for="checkbox5">
+                    <div class="form-check abc-checkbox abc-checkbox-warning">
+                        <input class="form-check-input" id="checkbox5" type="checkbox" checked>
+                        <label class="form-check-label" for="checkbox5">
                             Warning
                         </label>
                     </div>
-                    <div class="checkbox checkbox-danger">
-                        <input id="checkbox6" type="checkbox" class="styled" checked>
-                        <label for="checkbox6">
+                    <div class="form-check abc-checkbox abc-checkbox-danger">
+                        <input class="form-check-input" id="checkbox6" type="checkbox" checked>
+                        <label class="form-check-label" for="checkbox6">
                             Check me out
                         </label>
                     </div>
-                    <p>Checkboxes without label text</p>
-                    <div class="checkbox">
-                        <input type="checkbox" class="styled" id="singleCheckbox1" value="option1" aria-label="Single checkbox One">
-                        <label></label>
-                    </div>
-                    <div class="checkbox checkbox-primary">
-                        <input type="checkbox" class="styled styled-primary" id="singleCheckbox2" value="option2" checked aria-label="Single checkbox Two">
-                        <label></label>
-                    </div>
-                    <p>Inline checkboxes</p>
-                    <div class="checkbox checkbox-inline">
-                        <input type="checkbox" class="styled" id="inlineCheckbox1" value="option1">
-                        <label for="inlineCheckbox1"> Inline One </label>
-                    </div>
-                    <div class="checkbox checkbox-success checkbox-inline">
-                        <input type="checkbox" class="styled" id="inlineCheckbox2" value="option1" checked>
-                        <label for="inlineCheckbox2"> Inline Two </label>
-                    </div>
-                    <div class="checkbox checkbox-inline">
-                        <input type="checkbox" class="styled" id="inlineCheckbox3" value="option1">
-                        <label for="inlineCheckbox3"> Inline Three </label>
-                    </div>
                 </fieldset>
             </div>
             <div class="col-md-4">
@@ -86,17 +67,17 @@ <h2>Checkboxes</h2>
                         Circled
                     </legend>
                     <p>
-                        <code>.checkbox-circle</code> for roundness.
+                        <code>.abc-checkbox-circle</code> for roundness.
                     </p>
-                    <div class="checkbox checkbox-circle">
-                        <input id="checkbox7" class="styled" type="checkbox">
-                        <label for="checkbox7">
+                    <div class="form-check abc-checkbox abc-checkbox-circle">
+                        <input class="form-check-input" id="checkbox7" type="checkbox">
+                        <label class="form-check-label" for="checkbox7">
                             Simply Rounded
                         </label>
                     </div>
-                    <div class="checkbox checkbox-info checkbox-circle">
-                        <input id="checkbox8" class="styled" type="checkbox" checked>
-                        <label for="checkbox8">
+                    <div class="form-check abc-checkbox abc-checkbox-info abc-checkbox-circle">
+                        <input class="form-check-input" id="checkbox8" type="checkbox" checked>
+                        <label class="form-check-label" for="checkbox8">
                             Me too
                         </label>
                     </div>
@@ -110,29 +91,76 @@ <h2>Checkboxes</h2>
                     <p>
                         Disabled state also supported.
                     </p>
-                    <div class="checkbox">
-                        <input class="styled" id="checkbox9" type="checkbox" disabled>
-                        <label for="checkbox9">
+                    <div class="form-check abc-checkbox">
+                        <input class="form-check-input" id="checkbox9" type="checkbox" disabled>
+                        <label class="form-check-label" for="checkbox9">
                             Can't check this
                         </label>
                     </div>
-                    <div class="checkbox checkbox-success">
-                        <input class="styled styled" id="checkbox10" type="checkbox" disabled checked>
-                        <label for="checkbox10">
+                    <div class="form-check abc-checkbox abc-checkbox-success">
+                        <input class="form-check-input" id="checkbox10" type="checkbox" disabled checked>
+                        <label class="form-check-label" for="checkbox10">
                             This too
                         </label>
                     </div>
-                    <div class="checkbox checkbox-warning checkbox-circle">
-                        <input class="styled" id="checkbox11" type="checkbox" disabled checked>
-                        <label for="checkbox11">
+                    <div class="form-check abc-checkbox abc-checkbox-warning abc-checkbox-circle">
+                        <input class="form-check-input" id="checkbox11" type="checkbox" disabled checked>
+                        <label class="form-check-label" for="checkbox11">
                             And this
                         </label>
                     </div>
                 </fieldset>
             </div>
         </div>
+        <div class="row mt-3">
+            <div class="col-md-4">
+                <fieldset>
+                    <legend>
+                        Without label text
+                    </legend>
+                    <div class="form-check abc-checkbox">
+                        <input class="form-check-input" type="checkbox" id="singleCheckbox1" value="option1" aria-label="Single checkbox One">
+                        <label class="form-check-label" for="singleCheckbox1"></label>
+                    </div>
+                    <div class="form-check abc-checkbox abc-checkbox-primary">
+                        <input class="form-check-input" type="checkbox" id="singleCheckbox2" value="option2" checked aria-label="Single checkbox Two">
+                        <label class="form-check-label" for="singleCheckbox2"></label>
+                    </div>
+                </fieldset>
+            </div>
+            <div class="col-md-4">
+                <fieldset>
+                    <legend>
+                        Indeterminate state
+                    </legend>
+                    <div class="form-check abc-checkbox abc-checkbox-primary">
+                        <input class="form-check-input" id="indeterminateCheckbox" type="checkbox" onclick="changeState(this)">
+                        <label class="form-check-label" for="indeterminateCheckbox"></label>
+                    </div>
+                </fieldset>
+            </div>
+            <div class="col-md-4">
+                <fieldset>
+                    <legend>
+                        Inline checkboxes
+                    </legend>
+                    <div class="form-check abc-checkbox form-check-inline">
+                        <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
+                        <label class="form-check-label" for="inlineCheckbox1"> One </label>
+                    </div>
+                    <div class="form-check abc-checkbox abc-checkbox-success form-check-inline">
+                        <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option1" checked>
+                        <label class="form-check-label" for="inlineCheckbox2"> Two </label>
+                    </div>
+                    <div class="form-check abc-checkbox form-check-inline">
+                        <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option1">
+                        <label class="form-check-label" for="inlineCheckbox3"> Three </label>
+                    </div>
+                </fieldset>
+            </div>
+        </div>
     </form>
-    <h2>Radios</h2>
+    <h2 class="mt-5">Radios</h2>
     <form role="form">
         <div class="row">
             <div class="col-md-4">
@@ -141,56 +169,38 @@ <h2>Radios</h2>
                         Basic
                     </legend>
                     <p>
-                        Supports bootstrap brand colors: <code>.radio-primary</code>, <code>.radio-danger</code> etc.
+                        Supports bootstrap theme colors: <code>.abc-radio-primary</code>, <code>.abc-radio-danger</code> etc.
                     </p>
                     <div class="row">
                         <div class="col-sm-6">
-                            <div class="radio">
-                                <input type="radio" name="radio1" id="radio1" value="option1" checked>
-                                <label for="radio1">
+                            <div class="form-check abc-radio">
+                                <input class="form-check-input" type="radio" name="radio1" id="radio1" value="option1" checked>
+                                <label class="form-check-label" for="radio1">
                                     Small
                                 </label>
                             </div>
-                            <div class="radio">
-                                <input type="radio" name="radio1" id="radio2" value="option2">
-                                <label for="radio2">
+                            <div class="form-check abc-radio">
+                                <input class="form-check-input" type="radio" name="radio1" id="radio2" value="option2">
+                                <label class="form-check-label" for="radio2">
                                     Big
                                 </label>
                             </div>
                         </div>
                         <div class="col-sm-6">
-                            <div class="radio radio-danger">
-                                <input type="radio" name="radio2" id="radio3" value="option1">
-                                <label for="radio3">
+                            <div class="form-check abc-radio abc-radio-danger">
+                                <input class="form-check-input" type="radio" name="radio2" id="radio3" value="option1">
+                                <label class="form-check-label" for="radio3">
                                     Next
                                 </label>
                             </div>
-                            <div class="radio radio-danger">
-                                <input type="radio" name="radio2" id="radio4" value="option2" checked>
-                                <label for="radio4">
+                            <div class="form-check abc-radio abc-radio-danger">
+                                <input class="form-check-input" type="radio" name="radio2" id="radio4" value="option2" checked>
+                                <label class="form-check-label" for="radio4">
                                     One
                                 </label>
                             </div>
                         </div>
                     </div>
-                    <p>Radios without label text</p>
-                    <div class="radio">
-                        <input type="radio" id="singleRadio1" value="option1" name="radioSingle1" aria-label="Single radio One">
-                        <label></label>
-                    </div>
-                    <div class="radio radio-success">
-                        <input type="radio" id="singleRadio2" value="option2" name="radioSingle1" checked aria-label="Single radio Two">
-                        <label></label>
-                    </div>
-                    <p>Inline radios</p>
-                    <div class="radio radio-info radio-inline">
-                        <input type="radio" id="inlineRadio1" value="option1" name="radioInline" checked>
-                        <label for="inlineRadio1"> Inline One </label>
-                    </div>
-                    <div class="radio radio-inline">
-                        <input type="radio" id="inlineRadio2" value="option2" name="radioInline">
-                        <label for="inlineRadio2"> Inline Two </label>
-                    </div>
                 </fieldset>
             </div>
             <div class="col-md-4">
@@ -201,15 +211,15 @@ <h2>Radios</h2>
                     <p>
                         Disabled state also supported.
                     </p>
-                    <div class="radio radio-danger">
-                        <input type="radio" name="radio3" id="radio5" value="option1" disabled>
-                        <label for="radio5">
+                    <div class="form-check abc-radio abc-radio-danger">
+                        <input class="form-check-input" type="radio" name="radio3" id="radio5" value="option1" disabled>
+                        <label class="form-check-label" for="radio5">
                             Next
                         </label>
                     </div>
-                    <div class="radio">
-                        <input type="radio" name="radio3" id="radio6" value="option2" checked disabled>
-                        <label for="radio6">
+                    <div class="form-check abc-radio">
+                        <input class="form-check-input" type="radio" name="radio3" id="radio6" value="option2" checked disabled>
+                        <label class="form-check-label" for="radio6">
                             One
                         </label>
                     </div>
@@ -223,28 +233,78 @@ <h2>Radios</h2>
                     <p>
                         Radios can be made to look like checkboxes.
                     </p>
-                    <div class="checkbox checkbox">
-                        <input type="radio" name="radio4" id="radio7" value="option1" checked>
-                        <label for="radio7">
-                            Defeault
+                    <div class="form-check abc-checkbox abc-checkbox">
+                        <input class="form-check-input" type="radio" name="radio4" id="radio7" value="option1" checked>
+                        <label class="form-check-label" for="radio7">
+                            Default
                         </label>
                     </div>
-                    <div class="checkbox checkbox-success">
-                        <input type="radio" name="radio4" id="radio8" value="option2">
-                        <label for="radio8">
+                    <div class="form-check abc-checkbox abc-checkbox-success">
+                        <input class="form-check-input" type="radio" name="radio4" id="radio8" value="option2">
+                        <label class="form-check-label" for="radio8">
                             Success
                         </label>
                     </div>
-                    <div class="checkbox checkbox-danger">
-                        <input type="radio" name="radio4" id="radio9" value="option3">
-                        <label for="radio9">
+                    <div class="form-check abc-checkbox abc-checkbox-danger">
+                        <input class="form-check-input" type="radio" name="radio4" id="radio9" value="option3">
+                        <label class="form-check-label" for="radio9">
                             Danger
                         </label>
                     </div>
                 </fieldset>
             </div>
         </div>
+        <div class="row mt-3">
+            <div class="col-md-4">
+                <fieldset>
+                    <legend>
+                        Without label text
+                    </legend>
+                    <div class="form-check abc-radio">
+                        <input class="form-check-input" type="radio" id="singleRadio1" value="option1" name="radioSingle1" aria-label="Single radio One">
+                        <label class="form-check-label" for="singleRadio1"></label>
+                    </div>
+                    <div class="form-check abc-radio abc-radio-success">
+                        <input class="form-check-input" type="radio" id="singleRadio2" value="option2" name="radioSingle1" checked aria-label="Single radio Two">
+                        <label class="form-check-label" for="singleRadio2"></label>
+                    </div>
+                </fieldset>
+            </div>
+            <div class="col-md-4">
+                <fieldset>
+                    <legend>
+                        Inline radios
+                    </legend>
+                    <div class="form-check abc-radio abc-radio-info form-check-inline">
+                        <input class="form-check-input" type="radio" id="inlineRadio1" value="option1" name="radioInline" checked>
+                        <label class="form-check-label" for="inlineRadio1"> Inline One </label>
+                    </div>
+                    <div class="form-check abc-radio form-check-inline">
+                        <input class="form-check-input" type="radio" id="inlineRadio2" value="option2" name="radioInline">
+                        <label class="form-check-label" for="inlineRadio2"> Inline Two </label>
+                    </div>
+                </fieldset>
+            </div>
+        </div>
+    </form>
+
+    <form role="form">
+        <div class="row mt-3">
+            <div class="col-12">
+                <fieldset>
+                    <p class="text-center">
+                        Made by <a href="https://flatlogic.com/" target="_blank" rel="nofollow">Flatlogic</a>
+                    </p>
+                </fieldset>
+            </div>
+        </div>
     </form>
 </div>
+<script type="text/javascript">
+  function changeState(el) {
+    if (el.readOnly) el.checked=el.readOnly=false;
+    else if (!el.checked) el.readOnly=el.indeterminate=true;
+  }
+</script>
 </body>
 </html>