diff --git a/package-lock.json b/package-lock.json
index 5fc84b6b4e..01561c6ba0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -443,7 +443,7 @@
     },
     "@google-cloud/common": {
       "version": "0.17.0",
-      "resolved": "https://registry.npmjs.org/@google-cloud/common/-/common-0.17.0.tgz",
+      "resolved": "http://registry.npmjs.org/@google-cloud/common/-/common-0.17.0.tgz",
       "integrity": "sha512-HRZLSU762E6HaKoGfJGa8W95yRjb9rY7LePhjaHK9ILAnFacMuUGVamDbTHu1csZomm1g3tZTtXfX/aAhtie/Q==",
       "dev": true,
       "optional": true,
@@ -931,6 +931,15 @@
         }
       }
     },
+    "@ng-bootstrap/ng-bootstrap": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-4.1.3.tgz",
+      "integrity": "sha512-aW6qhBUfKQ0qnqwkZAZT5SmJsT5Bh/mKKO3kZH3MWcIN9gxQ/8/Bva6O+w8IYrbm3Os0+XlRdBXbu/mybYn7yw==",
+      "dev": true,
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "@ngtools/webpack": {
       "version": "8.0.0-rc.2",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-8.0.0-rc.2.tgz",
@@ -3595,13 +3604,13 @@
       "dependencies": {
         "minimist": {
           "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
           "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
           "dev": true
         },
         "mkdirp": {
           "version": "0.5.1",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+          "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
           "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "dev": true,
           "requires": {
@@ -5478,7 +5487,7 @@
         },
         "yargs": {
           "version": "3.32.0",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.32.0.tgz",
+          "resolved": "http://registry.npmjs.org/yargs/-/yargs-3.32.0.tgz",
           "integrity": "sha1-AwiOnr+edWtpdRYR0qXvWRSCyZU=",
           "dev": true,
           "requires": {
@@ -6724,7 +6733,7 @@
       "dependencies": {
         "ansi-escapes": {
           "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.4.0.tgz",
+          "resolved": "http://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.4.0.tgz",
           "integrity": "sha1-06ioOzGapneTZisT52HHkRQiMG4=",
           "dev": true
         },
@@ -6759,7 +6768,7 @@
         },
         "inquirer": {
           "version": "0.12.0",
-          "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-0.12.0.tgz",
+          "resolved": "http://registry.npmjs.org/inquirer/-/inquirer-0.12.0.tgz",
           "integrity": "sha1-HvK/1jUE3wvHV4X/+MLEHfEvB34=",
           "dev": true,
           "requires": {
@@ -6805,7 +6814,7 @@
         },
         "onetime": {
           "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
+          "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
           "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
           "dev": true
         },
@@ -10485,13 +10494,13 @@
       "dependencies": {
         "minimist": {
           "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
           "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
           "dev": true
         },
         "mkdirp": {
           "version": "0.5.1",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+          "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
           "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "dev": true,
           "requires": {
@@ -10597,13 +10606,13 @@
         },
         "minimist": {
           "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
           "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
           "dev": true
         },
         "mkdirp": {
           "version": "0.5.1",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+          "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
           "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "dev": true,
           "requires": {
@@ -10645,13 +10654,13 @@
         },
         "minimist": {
           "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
           "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
           "dev": true
         },
         "mkdirp": {
           "version": "0.5.1",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+          "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
           "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "dev": true,
           "requires": {
@@ -13409,7 +13418,7 @@
         },
         "onetime": {
           "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
+          "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
           "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
           "dev": true
         },
@@ -13512,7 +13521,7 @@
     },
     "p-cancelable": {
       "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-0.4.1.tgz",
+      "resolved": "http://registry.npmjs.org/p-cancelable/-/p-cancelable-0.4.1.tgz",
       "integrity": "sha512-HNa1A8LvB1kie7cERyy21VNeHb2CWJJYqyyC2o3klWFfMGlFmWv2Z7sFgZH8ZiaYL95ydToKTFVXgMV/Os0bBQ==",
       "dev": true,
       "optional": true
@@ -18433,7 +18442,7 @@
       "dependencies": {
         "bluebird": {
           "version": "3.4.7",
-          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.4.7.tgz",
+          "resolved": "http://registry.npmjs.org/bluebird/-/bluebird-3.4.7.tgz",
           "integrity": "sha1-9y12C+Cbf3bQjtj66Ysomo0F+rM=",
           "dev": true
         },
@@ -18832,13 +18841,13 @@
         },
         "minimist": {
           "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
           "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
           "dev": true
         },
         "mkdirp": {
           "version": "0.5.1",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+          "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
           "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "dev": true,
           "requires": {
@@ -18979,13 +18988,13 @@
         },
         "minimist": {
           "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
           "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
           "dev": true
         },
         "mkdirp": {
           "version": "0.5.1",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+          "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
           "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "dev": true,
           "requires": {
diff --git a/package.json b/package.json
index 1a9f5812ca..203af0b762 100644
--- a/package.json
+++ b/package.json
@@ -121,6 +121,7 @@
     "@angular/cli": "8.0.0-rc.2",
     "@angular/compiler-cli": "8.0.0-rc.2",
     "@angular/language-service": "8.0.0-rc.2",
+    "@ng-bootstrap/ng-bootstrap": "^4.1.3",
     "@schematics/angular": "^8.0.0-rc.2",
     "@types/gulp": "3.8.36",
     "@types/highlight.js": "9.12.2",
diff --git a/src/framework/bootstrap/styles/_button-group.scss b/src/framework/bootstrap/styles/_button-group.scss
index 4764d8e1ae..55eb7d1671 100644
--- a/src/framework/bootstrap/styles/_button-group.scss
+++ b/src/framework/bootstrap/styles/_button-group.scss
@@ -4,7 +4,7 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-@import 'default-buttons';
+@import 'status-buttons';
 
 @mixin btn-group-primary-separator() {
   @include nb-theme(color-primary-600);
diff --git a/src/framework/bootstrap/styles/_buttons.scss b/src/framework/bootstrap/styles/_buttons.scss
index 9ee8327e06..6709ed4cad 100644
--- a/src/framework/bootstrap/styles/_buttons.scss
+++ b/src/framework/bootstrap/styles/_buttons.scss
@@ -6,40 +6,32 @@
 
 @import 'shape-buttons';
 @import 'size-buttons';
-@import 'default-buttons';
+@import 'status-buttons';
 @import 'hero-buttons';
 @import 'outline-buttons';
 
 @mixin nb-b-buttons-theme() {
 
   .btn {
-    color: nb-theme(btn-fg);
-    text-transform: uppercase;
-    letter-spacing: 0.4px;
-    font-weight: nb-theme(font-weight-bolder);
-    font-family: nb-theme(btn-font-family);
-    border: 2px solid transparent;
-    transition: none;
-    cursor: nb-theme(btn-cursor);
+    cursor: nb-theme(button-cursor);
+    font-family: nb-theme(button-text-font-family);
+    font-weight: nb-theme(button-text-font-weight);
 
-    &:focus, .focus,
-    &:hover, .hover,
-    &:active, .active {
-      color: nb-theme(btn-fg);
-      cursor: nb-theme(btn-cursor);
+    &:focus {
+      box-shadow: 0 0 0 nb-theme(button-outline-width) nb-theme(button-outline-color);
+      outline: none;
     }
 
-    &:not(:disabled):not(.disabled) {
-      cursor: nb-theme(btn-cursor);
+    &[disabled] {
+      cursor: nb-theme(button-disabled-cursor);
     }
 
-    @include btn-md();
+    @include b-btn-size(medium);
   }
 
-  @include btn-shape();
-  @include btn-size();
-
-  @include btn-default();
-  @include btn-hero();
-  @include btn-outline();
+  @include b-btn-shapes();
+  @include b-btn-sizes();
+  @include b-btn-statuses();
+  @include b-btn-heros();
+  @include b-btn-outlines();
 }
diff --git a/src/framework/bootstrap/styles/_custom-forms.scss b/src/framework/bootstrap/styles/_custom-forms.scss
deleted file mode 100644
index 0cb007d4e4..0000000000
--- a/src/framework/bootstrap/styles/_custom-forms.scss
+++ /dev/null
@@ -1,118 +0,0 @@
-/**
- * @license
- * Copyright Akveo. All Rights Reserved.
- * Licensed under the MIT License. See License.txt in the project root for license information.
- */
-
-// locally used mixin
-@mixin hover-checked-border($color) {
-  .custom-control-input:hover ~ .custom-control-indicator,
-  .custom-control-input:checked ~ .custom-control-indicator,
-  .custom-control-input:hover:checked ~ .custom-control-indicator {
-    border-color: $color;
-  }
-}
-
-@mixin custom-forms() {
-  .custom-control {
-    margin: 0;
-    min-height: inherit;
-    padding: 0.375rem 1.5rem;
-    display: flex;
-    align-items: center;
-
-    .custom-control-indicator {
-      background-color: nb-theme(checkbox-bg);
-      border-radius: 50%;
-      width: nb-theme(checkbox-size);
-      height: nb-theme(checkbox-size);
-      border: nb-theme(checkbox-border-size) solid nb-theme(checkbox-border-color);
-      flex-shrink: 0;
-      position: absolute;
-      @include nb-ltr(left, 0);
-      @include nb-rtl(right, 0);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    &.custom-checkbox > .custom-control-input:checked ~ .custom-control-indicator::before {
-      content: '';
-      width: 0.5rem;
-      height: 0.75rem;
-      border: solid nb-theme(checkbox-fg);
-      border-width: 0 2px 2px 0;
-      transform: rotate(45deg);
-    }
-
-    .custom-control-label {
-      &::before {
-        top: auto;
-      }
-
-      &::after {
-        top: 0.35rem;
-      }
-    }
-
-    &.custom-radio > .custom-control-input:checked ~ .custom-control-indicator::before {
-      content: '';
-      width: 0.75rem;
-      height: 0.75rem;
-      background-color: nb-theme(radio-fg);
-      border-radius: 50%;
-      position: absolute;
-    }
-
-    .custom-control-input {
-      background-color: transparent;
-
-      &:focus ~ .custom-control-indicator {
-        box-shadow: none;
-      }
-
-      &:checked ~ .custom-control-indicator {
-        background-image: none;
-        display: flex;
-        justify-content: center;
-      }
-
-      &:disabled ~,
-      &:disabled:hover ~ {
-        .custom-control-indicator {
-          background-color: transparent;
-          border-color: nb-theme(checkbox-border-color);
-          opacity: 0.5;
-        }
-
-        .custom-control-description {
-          color: nb-theme(checkbox-fg);
-          opacity: 0.5;
-        }
-      }
-
-      &:checked ~ .custom-control-indicator,
-      &:active ~ .custom-control-indicator {
-        background-color: nb-theme(checkbox-bg);
-      }
-    }
-
-    @include hover-checked-border(nb-theme(checkbox-selected-border-color));
-    &.success {
-      @include hover-checked-border(nb-theme(color-success));
-    }
-    &.warning {
-      @include hover-checked-border(nb-theme(color-warning));
-    }
-    &.danger {
-      @include hover-checked-border(nb-theme(color-danger));
-    }
-
-    .custom-control-description {
-      padding-left: 0.25rem;
-      padding-right: 0.25rem;
-      color: nb-theme(color-fg-heading);
-    }
-  }
-}
-
diff --git a/src/framework/bootstrap/styles/_default-buttons.scss b/src/framework/bootstrap/styles/_default-buttons.scss
deleted file mode 100644
index 456f84f1fe..0000000000
--- a/src/framework/bootstrap/styles/_default-buttons.scss
+++ /dev/null
@@ -1,252 +0,0 @@
-/**
- * @license
- * Copyright Akveo. All Rights Reserved.
- * Licensed under the MIT License. See License.txt in the project root for license information.
- */
-
-@mixin btn-default() {
-
-  .btn.btn-primary {
-    @include btn-primary();
-  }
-
-  .btn.btn-success {
-    @include btn-success();
-  }
-
-  .btn.btn-warning {
-    @include btn-warning();
-  }
-
-  .btn.btn-info {
-    @include btn-info();
-  }
-
-  .btn.btn-danger {
-    @include btn-danger();
-  }
-
-  .btn.btn-secondary {
-    @include btn-secondary();
-  }
-}
-
-@mixin btn-primary() {
-  background-color: nb-theme(btn-primary-bg);
-
-  @include btn-primary-focus();
-  @include btn-primary-hover();
-  @include btn-primary-active();
-  @include btn-disabled();
-  @include btn-primary-pulse();
-}
-
-@mixin btn-success() {
-  background-color: nb-theme(btn-success-bg);
-
-  @include btn-success-focus();
-  @include btn-success-hover();
-  @include btn-success-active();
-  @include btn-disabled();
-  @include btn-success-pulse();
-}
-
-@mixin btn-warning() {
-  background-color: nb-theme(btn-warning-bg);
-
-  @include btn-warning-focus();
-  @include btn-warning-hover();
-  @include btn-warning-active();
-  @include btn-disabled();
-  @include btn-warning-pulse();
-}
-
-@mixin btn-info() {
-  background-color: nb-theme(btn-info-bg);
-
-  @include btn-info-focus();
-  @include btn-info-hover();
-  @include btn-info-active();
-  @include btn-disabled();
-  @include btn-info-pulse();
-}
-
-@mixin btn-danger() {
-  background-color: nb-theme(btn-danger-bg);
-
-  @include btn-danger-focus();
-  @include btn-danger-hover();
-  @include btn-danger-active();
-  @include btn-disabled();
-  @include btn-danger-pulse();
-}
-
-@mixin btn-secondary() {
-  @include btn-secondary-border();
-  @include btn-secondary-fg();
-  @include btn-secondary-bg();
-  @include btn-secondary-focus();
-  @include btn-secondary-hover();
-  @include btn-secondary-active();
-  @include btn-disabled();
-  @include btn-secondary-pulse();
-
-  &:focus, &.focus,
-  &:hover, &.hover,
-  &:active, &.active {
-    @include btn-outline-fg();
-  }
-}
-
-@mixin btn-outline-focus($focus) {
-  &:focus,
-  &.focus {
-    border-color: $focus;
-    box-shadow: none;
-  }
-}
-
-@mixin btn-focus($focus) {
-  &:focus,
-  &.focus {
-    color: nb-theme(btn-outline-hover-fg);
-    background-color: $focus;
-    border-color: transparent;
-    box-shadow: none;
-  }
-}
-
-@mixin btn-hover($hover) {
-  &:hover,
-  &.hover {
-    color: nb-theme(btn-outline-hover-fg);
-    background-color: $hover;
-    border-color: transparent;
-  }
-}
-
-@mixin btn-active($active) {
-  &:active,
-  &.active,
-  &:active:focus {
-    color: nb-theme(btn-outline-hover-fg);
-    background-color: $active;
-    border-color: transparent;
-    box-shadow: none;
-  }
-}
-
-// Focus
-@mixin btn-primary-focus() {
-  @include btn-focus(nb-theme(btn-primary-hover-bg));
-}
-
-@mixin btn-success-focus() {
-  @include btn-focus(nb-theme(btn-success-hover-bg));
-}
-
-@mixin btn-warning-focus() {
-  @include btn-focus(nb-theme(btn-warning-hover-bg));
-}
-
-@mixin btn-info-focus() {
-  @include btn-focus(nb-theme(btn-info-hover-bg));
-}
-
-@mixin btn-danger-focus() {
-  @include btn-focus(nb-theme(btn-danger-hover-bg));
-}
-
-@mixin btn-secondary-focus() {
-  @include btn-outline-focus(nb-theme(btn-secondary-hover-bg));
-}
-
-// Hover
-@mixin btn-primary-hover() {
-  @include btn-hover(nb-theme(btn-primary-hover-bg));
-}
-
-@mixin btn-success-hover() {
-  @include btn-hover(nb-theme(btn-success-hover-bg));
-}
-
-@mixin btn-warning-hover() {
-  @include btn-hover(nb-theme(btn-warning-hover-bg));
-}
-
-@mixin btn-info-hover() {
-  @include btn-hover(nb-theme(btn-info-hover-bg));
-}
-
-@mixin btn-danger-hover() {
-  @include btn-hover(nb-theme(btn-danger-hover-bg));
-}
-
-@mixin btn-secondary-hover() {
-  @include btn-hover(nb-theme(btn-secondary-hover-bg));
-}
-
-// Active
-@mixin btn-primary-active() {
-  @include btn-active(nb-theme(btn-primary-active-bg));
-}
-
-@mixin btn-success-active() {
-  @include btn-active(nb-theme(btn-success-active-bg));
-}
-
-@mixin btn-warning-active() {
-  @include btn-active(nb-theme(btn-warning-active-bg));
-}
-
-@mixin btn-info-active() {
-  @include btn-active(nb-theme(btn-info-active-bg));
-}
-
-@mixin btn-danger-active() {
-  @include btn-active(nb-theme(btn-danger-active-bg));
-}
-
-@mixin btn-secondary-active() {
-  @include btn-active(nb-theme(btn-secondary-active-bg));
-}
-
-// Disabled
-@mixin btn-disabled() {
-  &:disabled, &.btn-disabled {
-    opacity: nb-theme(btn-disabled-opacity);
-    cursor: default;
-  }
-}
-
-@mixin btn-secondary-border() {
-  border: 2px solid nb-theme(btn-secondary-border);
-}
-
-@mixin btn-secondary-fg() {
-  color: nb-theme(btn-outline-fg);
-}
-
-@mixin btn-secondary-bg() {
-  background-color: nb-theme(btn-secondary-bg);
-}
-
-// Pulse
-@mixin btn-primary-pulse() {
-  @include btn-pulse(primary, nb-theme(btn-primary-bg));
-}
-@mixin btn-success-pulse() {
-  @include btn-pulse(success, nb-theme(btn-success-bg));
-}
-@mixin btn-warning-pulse() {
-  @include btn-pulse(warning, nb-theme(btn-warning-bg));
-}
-@mixin btn-info-pulse() {
-  @include btn-pulse(info, nb-theme(btn-info-bg));
-}
-@mixin btn-danger-pulse() {
-  @include btn-pulse(danger, nb-theme(btn-danger-bg));
-}
-@mixin btn-secondary-pulse() {
-  @include btn-pulse(secondary, nb-theme(btn-secondary-border));
-}
diff --git a/src/framework/bootstrap/styles/_default-form-control.scss b/src/framework/bootstrap/styles/_default-form-control.scss
index 975c32c121..66c6afd15b 100644
--- a/src/framework/bootstrap/styles/_default-form-control.scss
+++ b/src/framework/bootstrap/styles/_default-form-control.scss
@@ -24,24 +24,24 @@
 
 @mixin form-control-success() {
   &, &:focus {
-    border-color: nb-theme(form-control-success-border-color);
+    border-color: nb-theme(input-success-border-color);
   }
 }
 
 @mixin form-control-info() {
   &, &:focus {
-    border-color: nb-theme(form-control-info-border-color);
+    border-color: nb-theme(input-info-border-color);
   }
 }
 
 @mixin form-control-danger() {
   &, &:focus {
-    border-color: nb-theme(form-control-danger-border-color);
+    border-color: nb-theme(input-danger-border-color);
   }
 }
 
 @mixin form-control-warning() {
   &, &:focus {
-    border-color: nb-theme(form-control-warning-border-color);
+    border-color: nb-theme(input-warning-border-color);
   }
 }
diff --git a/src/framework/bootstrap/styles/_dropdowns.scss b/src/framework/bootstrap/styles/_dropdowns.scss
index e03d909869..2236ff6e04 100644
--- a/src/framework/bootstrap/styles/_dropdowns.scss
+++ b/src/framework/bootstrap/styles/_dropdowns.scss
@@ -3,451 +3,48 @@
  * Copyright Akveo. All Rights Reserved.
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
-
 @import 'outline-buttons';
 
-@mixin dropdown-menu-background($color) {
-  background-color: $color;
-}
-
-@mixin dropdown-menu-primary-background() {
-  @include dropdown-menu-background(nb-theme(btn-primary-bg));
-}
-
-@mixin dropdown-menu-success-background() {
-  @include dropdown-menu-background(nb-theme(btn-success-bg));
-}
-
-@mixin dropdown-menu-warning-background() {
-  @include dropdown-menu-background(nb-theme(btn-warning-bg));
-}
-
-@mixin dropdown-menu-info-background() {
-  @include dropdown-menu-background(nb-theme(btn-info-bg));
-}
-
-@mixin dropdown-menu-danger-background() {
-  @include dropdown-menu-background(nb-theme(btn-danger-bg));
-}
-
-@mixin dropdown-menu-secondary-background() {
-  @include dropdown-menu-background(nb-theme(btn-secondary-border));
-}
-
-@mixin dropdown-menu-border($color) {
-  border-top: 1px solid $color;
-}
-
-@mixin dropdown-menu-primary-border() {
-  @include dropdown-menu-border(nb-theme(btn-primary-bg));
-}
-
-@mixin dropdown-menu-success-border() {
-  @include dropdown-menu-border(nb-theme(btn-success-bg));
-}
-
-@mixin dropdown-menu-warning-border() {
-  @include dropdown-menu-border(nb-theme(btn-warning-bg));
-}
-
-@mixin dropdown-menu-info-border() {
-  @include dropdown-menu-border(nb-theme(btn-info-bg));
-}
-
-@mixin dropdown-menu-danger-border() {
-  @include dropdown-menu-border(nb-theme(btn-danger-bg));
-}
-
-@mixin dropdown-menu-secondary-border() {
-  @include dropdown-menu-border(nb-theme(btn-secondary-border));
-}
-
-
-@mixin dropdown-menu-divider($color) {
-  background-color: $color;
-}
-
-@mixin dropdown-menu-primary-divider() {
-  @include dropdown-menu-divider(nb-theme(btn-primary-bg));
-}
-
-@mixin dropdown-menu-success-divider() {
-  @include dropdown-menu-divider(nb-theme(btn-success-bg));
-}
-
-@mixin dropdown-menu-warning-divider() {
-  @include dropdown-menu-divider(nb-theme(btn-warning-bg));
-}
-
-@mixin dropdown-menu-info-divider() {
-  @include dropdown-menu-divider(nb-theme(btn-info-bg));
-}
-
-@mixin dropdown-menu-danger-divider() {
-  @include dropdown-menu-divider(nb-theme(btn-danger-bg));
-}
-
-@mixin dropdown-menu-secondary-divider() {
-  @include dropdown-menu-divider(nb-theme(btn-secondary-border));
-}
-
 
 @mixin nb-b-dropdowns-theme() {
-  .dropdown.btn-group, .dropup.btn-group {
-    width: 100%;
-
-    .btn:first-child {
-      width: 90%;
-      @include nb-ltr(text-align, left);
-      @include nb-rtl(text-align, right);
-    }
-
-    .dropdown-toggle {
-      width: 10%;
-    }
-
-    .dropdown-menu {
-      left: 0 !important;
-    }
+  .dropdown-menu {
+    box-shadow: nb-theme(select-options-list-shadow);
+    max-height: nb-theme(select-options-list-max-height);
+    overflow: auto;
+    border: none;
   }
 
-  .dropdown.btn-group, .dropup.btn-group {
-    & > .dropdown-toggle::after {
-      margin-left: 0;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
-  }
-
-  .dropdown.btn-group.show, .dropup.btn-group.show {
-    .btn:first-child {
-      @include nb-ltr(border-bottom-left-radius, 0);
-      @include nb-rtl(border-bottom-right-radius, 0);
-    }
-  }
-
-  .dropdown, .dropup {
-    .dropdown-toggle {
-      width: 100%;
-      @include nb-ltr(text-align, left);
-      @include nb-rtl(text-align, right);
-      position: relative;
-    }
-
-    .dropdown-toggle::after {
-      position: absolute;
-    }
-
-    .btn-primary,
-    .btn-success,
-    .btn-warning,
-    .btn-info,
-    .btn-danger,
-    .btn-secondary {
-      border-color: transparent;
-    }
-
-    .btn-primary + .dropdown-menu,
-    .btn-outline-primary + .dropdown-menu {
-      @include dropdown-menu-primary-background();
-      @include dropdown-menu-primary-border();
-    }
-
-    .btn-success + .dropdown-menu,
-    .btn-outline-success + .dropdown-menu {
-      @include dropdown-menu-success-background();
-      @include dropdown-menu-success-border();
-    }
-
-    .btn-warning + .dropdown-menu,
-    .btn-outline-warning + .dropdown-menu {
-      @include dropdown-menu-warning-background();
-      @include dropdown-menu-warning-border();
-    }
-
-    .btn-info + .dropdown-menu,
-    .btn-outline-info + .dropdown-menu {
-      @include dropdown-menu-info-background();
-      @include dropdown-menu-info-border();
-    }
-
-    .btn-danger + .dropdown-menu,
-    .btn-outline-danger + .dropdown-menu {
-      @include dropdown-menu-danger-background();
-      @include dropdown-menu-danger-border();
-    }
-
-    .btn-secondary + .dropdown-menu,
-    .btn-outline-secondary + .dropdown-menu {
-      @include dropdown-menu-secondary-background();
-      @include dropdown-menu-secondary-border();
-    }
-
-    .btn-primary + .dropdown-menu > .dropdown-item,
-    .btn-outline-primary + .dropdown-menu > .dropdown-item {
-      @include btn-primary-hover();
-      @include btn-primary-focus();
-      @include btn-primary-active();
-    }
+  .dropdown-item {
+    user-select: none;
+    background-color: nb-theme(select-option-background-color);
+    color: nb-theme(select-option-text-color);
+    font-family: nb-theme(select-text-font-family);
+    font-weight: nb-theme(select-text-font-weight);
+    font-size: nb-theme(select-medium-text-font-size);
+    line-height: nb-theme(select-medium-text-line-height);
 
-    .btn-success + .dropdown-menu > .dropdown-item,
-    .btn-outline-success + .dropdown-menu > .dropdown-item {
-      @include btn-success-hover();
-      @include btn-success-focus();
-      @include btn-success-active();
+    &[disabled] {
+      background-color: nb-theme(select-option-disabled-background-color);
+      color: nb-theme(select-option-disabled-text-color);
     }
 
-    .btn-warning + .dropdown-menu > .dropdown-item,
-    .btn-outline-warning + .dropdown-menu > .dropdown-item {
-      @include btn-warning-hover();
-      @include btn-warning-focus();
-      @include btn-warning-active();
+    &:focus {
+      outline: none;
     }
 
-    .btn-info + .dropdown-menu > .dropdown-item,
-    .btn-outline-info + .dropdown-menu > .dropdown-item {
-      @include btn-info-hover();
-      @include btn-info-focus();
-      @include btn-info-active();
+    &.selected {
+      background-color: nb-theme(select-option-selected-background-color);
+      color: nb-theme(select-option-selected-text-color);
     }
 
-    .btn-danger + .dropdown-menu > .dropdown-item,
-    .btn-outline-danger + .dropdown-menu > .dropdown-item {
-      @include btn-danger-hover();
-      @include btn-danger-focus();
-      @include btn-danger-active();
-    }
-
-    .btn-secondary + .dropdown-menu > .dropdown-item,
-    .btn-outline-secondary + .dropdown-menu > .dropdown-item {
-      @include btn-secondary-hover();
-      @include btn-secondary-focus();
-      @include btn-secondary-active();
-    }
-
-
-    .btn-primary + .dropdown-menu > .dropdown-divider,
-    .btn-outline-primary + .dropdown-menu > .dropdown-divider {
-      @include dropdown-menu-primary-divider();
-    }
-
-    .btn-success + .dropdown-menu > .dropdown-divider,
-    .btn-outline-success + .dropdown-menu > .dropdown-divider {
-      @include dropdown-menu-success-divider();
-    }
-
-    .btn-warning + .dropdown-menu > .dropdown-divider,
-    .btn-outline-warning + .dropdown-menu > .dropdown-divider {
-      @include dropdown-menu-warning-divider();
-    }
-
-    .btn-info + .dropdown-menu > .dropdown-divider,
-    .btn-outline-info + .dropdown-menu > .dropdown-divider {
-      @include dropdown-menu-info-divider();
-    }
-
-    .btn-danger + .dropdown-menu > .dropdown-divider,
-    .btn-outline-danger + .dropdown-menu > .dropdown-divider {
-      @include dropdown-menu-danger-divider();
-    }
-
-    .btn-secondary + .dropdown-menu > .dropdown-divider,
-    .btn-outline-secondary + .dropdown-menu > .dropdown-divider {
-      @include dropdown-menu-secondary-divider();
-    }
-
-    .dropdown-menu {
-      margin: 0;
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      border-bottom-left-radius: nb-theme(btn-border-radius);
-      border-bottom-right-radius: nb-theme(btn-border-radius);
-      border: none;
-      width: 100%;
-      color: nb-theme(btn-fg);
-      padding: 0.75rem 0;
-      min-width: 100px;
-    }
-
-    .dropdown-item {
-      color: inherit;
-      padding: 0.75rem 1.5rem;
-      text-transform: uppercase;
-      font-size: 0.875rem;
-      font-family: nb-theme(font-secondary);
-      cursor: default;
-    }
-  }
-
-  .dropup .dropdown-menu {
-    margin: 0;
-    border-top-left-radius: nb-theme(btn-border-radius);
-    border-top-right-radius: nb-theme(btn-border-radius);
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  .dropdown:not(.btn-group), .dropup:not(.btn-group) {
-    .dropdown-toggle::after {
-      top: 50%;
-      transform: translate(0, -50%);
-      @include nb-ltr(right, 0.75rem);
-      @include nb-rtl(left, 0.75rem);
-    }
-  }
-
-  .dropdown.show, .dropup.show {
-    .dropdown-toggle {
-      box-shadow: none;
-    }
-
-    .dropdown-menu.show {
-      // automatically set direction based on layout direction
-      // have to use important, since ngbDropdownToggle inlines styles to element
-      left: auto !important;
-    }
-  }
-
-  .dropdown.show {
-    .dropdown-toggle {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-
-  .dropup.show {
-    .dropdown-toggle {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-    }
-  }
-
-  .dropdown.ghost-dropdown, .dropup.ghost-dropdown {
-    .dropdown-toggle {
-      color: nb-theme(btn-outline-fg);
-      background-color: nb-theme(color-bg);
-    }
-
-    .dropdown-menu {
-      color: nb-theme(btn-outline-fg);
-      background-color: nb-theme(color-bg);
-    }
-
-    .btn-primary:hover {
-      @include btn-outline-primary-border();
-    }
-
-    .btn-success:hover {
-      @include btn-outline-success-border();
-    }
-
-    .btn-warning:hover {
-      @include btn-outline-warning-border();
-    }
-
-    .btn-info:hover {
-      @include btn-outline-info-border();
-    }
-
-    .btn-danger:hover {
-      @include btn-outline-danger-border();
-    }
-
-    .btn-secondary:hover {
-      @include btn-outline-secondary-border();
-    }
-
-    .btn-primary + .dropdown-menu {
-      @include btn-outline-primary-border();
-    }
-
-    .btn-success + .dropdown-menu {
-      @include btn-outline-success-border();
-    }
-
-    .btn-warning + .dropdown-menu {
-      @include btn-outline-warning-border();
-    }
-
-    .btn-info + .dropdown-menu {
-      @include btn-outline-info-border();
-    }
-
-    .btn-danger + .dropdown-menu {
-      @include btn-outline-danger-border();
-    }
-
-    .btn-secondary + .dropdown-menu {
-      @include btn-outline-secondary-border();
-    }
-
-    .btn-primary + .dropdown-menu > .dropdown-item {
-      &:hover {
-        background-color: nb-theme(btn-primary-bg);
-      }
-    }
-
-    .btn-success + .dropdown-menu > .dropdown-item {
-      &:hover {
-        background-color: nb-theme(btn-success-bg);
-      }
-    }
-
-    .btn-warning + .dropdown-menu > .dropdown-item {
-      &:hover {
-        background-color: nb-theme(btn-warning-bg);
-      }
-    }
-
-    .btn-info + .dropdown-menu > .dropdown-item {
-      &:hover {
-        background-color: nb-theme(btn-info-bg);
-      }
-    }
-
-    .btn-danger + .dropdown-menu > .dropdown-item {
-      &:hover {
-        background-color: nb-theme(btn-danger-bg);
-      }
-    }
-
-    .btn-secondary + .dropdown-menu > .dropdown-item {
-      &:hover {
-        background-color: nb-theme(btn-secondary-border);
-      }
-    }
-  }
-
-  .dropdown.ghost-dropdown.show, .dropup.ghost-dropdown.show {
-    .dropdown-toggle {
-      &.btn-primary {
-        @include btn-outline-primary-border();
-      }
-
-      &.btn-success {
-        @include btn-outline-success-border();
-      }
-
-      &.btn-warning {
-        @include btn-outline-warning-border();
-      }
-
-      &.btn-info {
-        @include btn-outline-info-border();
-      }
-
-      &.btn-danger {
-        @include btn-outline-danger-border();
-      }
-
-      &.btn-secondary {
-        @include btn-outline-secondary-border();
-      }
+    &:focus {
+      background-color: nb-theme(select-option-focus-background-color);
+      color: nb-theme(select-option-focus-text-color);
     }
 
-    .dropdown-menu {
-      margin-top: -2px;
+    &:hover {
+      background-color: nb-theme(select-option-hover-background-color);
+      color: nb-theme(select-option-hover-text-color);
     }
   }
 }
diff --git a/src/framework/bootstrap/styles/_forms.scss b/src/framework/bootstrap/styles/_forms.scss
index 5f97459120..d634d7c9a7 100644
--- a/src/framework/bootstrap/styles/_forms.scss
+++ b/src/framework/bootstrap/styles/_forms.scss
@@ -3,243 +3,51 @@
  * Copyright Akveo. All Rights Reserved.
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
+@import '../../theme/styles/core/mixins';
 @import 'size-form-control';
 @import 'default-form-control';
-@import '../../theme/styles/core/mixins';
-@import 'custom-forms';
-
-// locally used mixin
-@mixin checkmark($size, $color, $wight, $opacity: 1) {
-  ~ .custom-control-label::after {
-    background-image: none;
-    content: '';
-    position: absolute;
-    height: calc(#{$size} * 0.6);
-    width: calc(#{$size} * 0.4);
-    top: calc(#{$size} * 0.4);
-    left: calc(#{$size} * 0.3);
-    border: solid $color;
-    border-width: 0 $wight $wight 0;
-    transform: rotate(45deg);
-    opacity: $opacity;
-  }
-}
-// locally used mixin
-@mixin radio($size, $color, $opacity) {
-  ~ .custom-control-label::after {
-    content: '';
-    position: absolute;
-    background-color: $color;
-    height: calc(#{$size} * 0.5);
-    width: calc(#{$size} * 0.5);
-    border: solid $color 0.35rem;
-    border-radius: 50%;
-    opacity: $opacity;
-    top: calc(#{$size} * 0.5);
-    left: calc(#{$size} * 0.21);
-  }
-}
-// locally used mixin
-@mixin label($color, $opacity) {
-  ~ .custom-control-label {
-    opacity: $opacity;
-    &::before {
-      color: transparent;
-      background-color: transparent;
-      border: 2px solid $color;
-      height: 1.25rem;
-      width: 1.25rem;
-      opacity: $opacity;
-    }
-  }
-}
 
 @mixin nb-b-forms-theme() {
 
-  .input-group-addon,
   .form-control {
-    padding: nb-theme(form-control-padding);
-    color: nb-theme(form-control-text-primary-color);
-    background-color: nb-theme(form-control-bg);
-    border: nb-theme(form-control-border-width) nb-theme(form-control-border-type) nb-theme(form-control-border-color);
-    font-family: nb-theme(font-main);
-    border-radius: nb-theme(form-control-border-radius);
-
-    $border-w: nb-theme(form-control-border-width);
-    $border-t: nb-theme(form-control-border-type);
-    $border-s: nb-theme(form-control-selected-border-color);
-
-    &:focus {
-      border: $border-w $border-t $border-s;
-      background-color: nb-theme(form-control-focus-bg);
-      box-shadow: none;
-    }
-
-    &:disabled {
-      border-color: nb-theme(form-control-border-color);
+    background-color: nb-theme(input-background-color);
+    border-color: nb-theme(input-border-color);
+    border-style: nb-theme(input-border-style);
+    border-width: nb-theme(input-border-width);
+    color: nb-theme(input-text-color);
+    font-family: nb-theme(input-text-font-family);
+    @include nb-component-animation(border, background-color, color);
 
-      @include install-placeholder(rgba(nb-theme(form-control-placeholder-color), 0.5),
-        nb-theme(form-control-placeholder-font-size));
+    &::placeholder {
+      color: nb-theme(input-placeholder-text-color);
+      font-family: nb-theme(input-placeholder-text-font-family);
+      text-overflow: ellipsis;
     }
-    @include install-placeholder(nb-theme(form-control-placeholder-color),
-      nb-theme(form-control-placeholder-font-size));
-  }
-
-  select.form-control:not([size]):not([multiple]) {
-    height: calc(2rem + 20px);
-  }
-
-  .form-control-label {
-    color: nb-theme(form-control-text-primary-color);
-    font-weight: nb-theme(form-control-label-font-weight);
-  }
-
-  .form-control-feedback {
-    font-size: nb-theme(form-control-feedback-font-size);
-    font-weight: nb-theme(form-control-feedback-font-weight);
-  }
-
-  .form-text {
-    color: nb-theme(color-fg);
-    font-family: nb-theme(font-main);
-
-    &.hint,
-    &.error {
-      @include nb-ltr(margin-left, 1rem);
-      @include nb-rtl(margin-right, 1rem);
-    }
-
-    &.error {
-      color: nb-theme(color-danger);
-    }
-  }
-
-  .custom-control {
-    position: relative;
-    display: block;
-    min-height: (1.5rem);
-    padding-left: 1.5rem;
 
-    .custom-control-label {
-      padding-left: 0.25rem;
-      color: nb-theme(color-fg-heading);
-    }
-  }
-
-  input.custom-control-input[type='checkbox'] {
-    position: absolute;
-    z-index: -1;
-    opacity: 0;
-
-    &:active ~ .custom-control-label::before {
-      background-color: transparent !important;
-    }
-
-    &:focus ~ .custom-control-label::before {
-      box-shadow: none !important;
-    }
-
-    & {
-      @include label(nb-theme(checkbox-border-color), 1);
-      @include checkmark(
-          nb-theme(checkbox-checked-size),
-          nb-theme(checkbox-checkmark),
-          nb-theme(checkbox-checked-border-size),
-          1
-      );
-    }
-
-    &:checked {
-      @include label(nb-theme(checkbox-checked-border-color), 1);
-      @include checkmark(
-          nb-theme(checkbox-checked-size),
-          nb-theme(checkbox-checked-checkmark),
-          nb-theme(checkbox-checked-border-size),
-          1
-      );
+    &:focus {
+      outline: none;
+      border-color: nb-theme(input-focus-border-color);
     }
 
     &:hover {
-      @include label(nb-theme(checkbox-checked-border-color), 1);
+      border-color: nb-theme(input-hover-border-color);
     }
 
     &:disabled {
-      @include label(nb-theme(checkbox-disabled-border-color), 0.5);
-      @include checkmark(
-          nb-theme(checkbox-disabled-size),
-          nb-theme(checkbox-checkmark),
-          nb-theme(checkbox-disabled-border-size),
-          0.5
-      );
-    }
+      background-color: nb-theme(input-disabled-background-color);
+      border-color: nb-theme(input-disabled-border-color);
+      color: nb-theme(input-disabled-text-color);
 
-    &:disabled:checked {
-      @include label(nb-theme(checkbox-disabled-border-color), 0.5);
-      @include checkmark(
-          nb-theme(checkbox-disabled-size),
-          nb-theme(checkbox-disabled-checkmark),
-          nb-theme(checkbox-disabled-border-size),
-          0.5
-      );
+      &::placeholder {
+        color: nb-theme(input-disabled-placeholder-text-color);
+      }
     }
-  }
-
-  input.custom-control-input[type='radio'] {
-    position: absolute;
-    z-index: -1;
-    opacity: 0;
 
-    &:active ~ .custom-control-label::before {
-      background-color: transparent !important;
-    }
-
-    &:focus ~ .custom-control-label::before {
-      box-shadow: none !important;
-    }
-
-    & {
-      @include label(nb-theme(checkbox-border-color), 1);
-      @include radio(
-          nb-theme(checkbox-checked-size),
-          nb-theme(checkbox-checkmark),
-          1
-      );
-    }
-
-    &:checked {
-      @include label(nb-theme(checkbox-checked-border-color), 1);
-      @include radio(
-          nb-theme(checkbox-checked-size),
-          nb-theme(checkbox-checked-checkmark),
-          1
-      );
-    }
-
-    &:hover {
-      @include label(nb-theme(checkbox-checked-border-color), 1);
-    }
-
-    &:disabled {
-      @include label(nb-theme(checkbox-disabled-border-color), 0.5);
-      @include radio(
-          nb-theme(checkbox-disabled-size),
-          nb-theme(checkbox-checkmark),
-          0.5
-      );
-    }
-
-    &:disabled:checked {
-      @include label(nb-theme(checkbox-disabled-border-color), 0.5);
-      @include radio(
-          nb-theme(checkbox-disabled-size),
-          nb-theme(checkbox-disabled-checkmark),
-          0.5
-      );
+    &.input-full-width {
+      width: 100%;
     }
   }
 
   @include form-control-size();
   @include form-control-default();
-
-  @include custom-forms();
 }
diff --git a/src/framework/bootstrap/styles/_globals.scss b/src/framework/bootstrap/styles/_globals.scss
index 7d24865210..bbba199fb6 100644
--- a/src/framework/bootstrap/styles/_globals.scss
+++ b/src/framework/bootstrap/styles/_globals.scss
@@ -13,9 +13,15 @@
 @import 'dropdowns';
 @import 'icon-buttons';
 @import 'forms';
-@import 'input-group';
 @import 'modals';
 @import 'layout';
 
 @mixin nb-bootstrap-global() {
+  @include nb-b-buttons-theme();
+  //@include nb-b-button-group-theme();
+  @include nb-b-dropdowns-theme();
+  //@include nb-b-icon-buttons-theme();
+  @include nb-b-forms-theme();
+  @include nb-b-modals-theme();
+  @include nb-b-layout-theme();
 }
diff --git a/src/framework/bootstrap/styles/_hero-buttons.scss b/src/framework/bootstrap/styles/_hero-buttons.scss
index b5da89994b..d34b497f11 100644
--- a/src/framework/bootstrap/styles/_hero-buttons.scss
+++ b/src/framework/bootstrap/styles/_hero-buttons.scss
@@ -4,434 +4,79 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-@mixin btn-hero() {
-  .btn.btn-hero-primary {
-    @include btn-hero-primary();
+@mixin b-btn-hero($status) {
+  $left-color: nb-theme(button-hero-#{$status}-left-background-color);
+  $right-color: nb-theme(button-hero-#{$status}-right-background-color);
+  $bevel: nb-theme(button-hero-bevel-size) nb-theme(button-hero-#{$status}-bevel-color);
+  $glow: nb-theme(button-hero-glow-size) nb-theme(button-hero-#{$status}-glow-color);
+  $shadow: nb-theme(button-hero-shadow);
+  $hero-box-shadows: $bevel, $glow, $shadow;
+
+  background-image: linear-gradient(to right, $left-color, $right-color);
+  border: none;
+  box-shadow: $hero-box-shadows;
+  color: nb-theme(button-hero-#{$status}-text-color);
+
+  &:focus {
+    $left-focus-color: nb-theme(button-hero-#{$status}-focus-left-background-color);
+    $right-focus-color: nb-theme(button-hero-#{$status}-focus-right-background-color);
+    background-image: linear-gradient(to right, $left-focus-color, $right-focus-color);
+    box-shadow: $hero-box-shadows, 0 0 0 nb-theme(button-hero-outline-width) nb-theme(button-hero-outline-color);
   }
 
-  .btn.btn-hero-success {
-    @include btn-hero-success();
+  &:hover {
+    $left-hover-color: nb-theme(button-hero-#{$status}-hover-left-background-color);
+    $right-hover-color: nb-theme(button-hero-#{$status}-hover-right-background-color);
+    background-image: linear-gradient(to right, $left-hover-color, $right-hover-color);
   }
 
-  .btn.btn-hero-warning {
-    @include btn-hero-warning();
+  &:active {
+    $left-active-color: nb-theme(button-hero-#{$status}-active-left-background-color);
+    $right-active-color: nb-theme(button-hero-#{$status}-active-right-background-color);
+    background-image: linear-gradient(to right, $left-active-color, $right-active-color);
   }
 
-  .btn.btn-hero-info {
-    @include btn-hero-info();
+  &[disabled] {
+    background-color: nb-theme(button-hero-#{$status}-disabled-background-color);
+    background-image: none;
+    color: nb-theme(button-hero-#{$status}-disabled-text-color);
   }
 
-  .btn.btn-hero-danger {
-    @include btn-hero-danger();
+  &.button-pulse {
+    animation: button-hero-#{$status}-pulse 0.75s infinite alternate;
   }
-}
-
-@mixin btn-hero-primary() {
-  @include btn-hero-primary-gradient();
-  @include btn-hero-primary-bevel-glow-shadow();
-  @include btn-hero-text();
-  @include btn-hero-primary-focus();
-  @include btn-hero-primary-hover();
-  @include btn-hero-primary-active();
-  @include btn-hero-primary-border();
-  @include btn-hero-disabled();
-  @include btn-hero-line-height();
-  @include btn-hero-primary-pulse();
-}
-
-@mixin btn-hero-success() {
-  @include btn-hero-success-gradient();
-  @include btn-hero-success-bevel-glow-shadow();
-  @include btn-hero-text();
-  @include btn-hero-success-focus();
-  @include btn-hero-success-hover();
-  @include btn-hero-success-active();
-  @include btn-hero-success-border();
-  @include btn-hero-disabled();
-  @include btn-hero-line-height();
-  @include btn-hero-success-pulse();
-}
-
-@mixin btn-hero-warning() {
-  @include btn-hero-warning-gradient();
-  @include btn-hero-warning-bevel-glow-shadow();
-  @include btn-hero-text();
-  @include btn-hero-warning-focus();
-  @include btn-hero-warning-hover();
-  @include btn-hero-warning-active();
-  @include btn-hero-warning-border();
-  @include btn-hero-disabled();
-  @include btn-hero-line-height();
-  @include btn-hero-warning-pulse();
-}
-
-@mixin btn-hero-info() {
-  @include btn-hero-info-gradient();
-  @include btn-hero-info-bevel-glow-shadow();
-  @include btn-hero-text();
-  @include btn-hero-info-focus();
-  @include btn-hero-info-hover();
-  @include btn-hero-info-active();
-  @include btn-hero-info-border();
-  @include btn-hero-disabled();
-  @include btn-hero-line-height();
-  @include btn-hero-info-pulse();
-}
-
-@mixin btn-hero-danger() {
-  @include btn-hero-danger-gradient();
-  @include btn-hero-danger-bevel-glow-shadow();
-  @include btn-hero-text();
-  @include btn-hero-danger-focus();
-  @include btn-hero-danger-hover();
-  @include btn-hero-danger-active();
-  @include btn-hero-danger-border();
-  @include btn-hero-disabled();
-  @include btn-hero-line-height();
-  @include btn-hero-danger-pulse();
-}
-
-@function btn-hero-primary-light-gradient() {
-  @return
-    linear-gradient(to right, nb-theme(btn-hero-primary-left-hover-bg), nb-theme(btn-hero-primary-right-hover-bg));
-}
-
-@function btn-hero-success-light-gradient() {
-  @return
-    linear-gradient(to right, nb-theme(btn-hero-success-left-hover-bg), nb-theme(btn-hero-success-right-hover-bg));
-}
 
-@function btn-hero-warning-light-gradient() {
-  @return
-    linear-gradient(to right, nb-theme(btn-hero-warning-left-hover-bg), nb-theme(btn-hero-warning-right-hover-bg));
-}
-
-@function btn-hero-info-light-gradient() {
-  @return
-    linear-gradient(to right, nb-theme(btn-hero-info-left-hover-bg), nb-theme(btn-hero-info-right-hover-bg));
-}
-
-@function btn-hero-danger-light-gradient() {
-  @return
-    linear-gradient(to right, nb-theme(btn-hero-danger-left-hover-bg), nb-theme(btn-hero-danger-right-hover-bg));
-}
-
-@function btn-hero-primary-dark-gradient() {
-  @return
-    linear-gradient(to right, nb-theme(btn-hero-primary-left-active-bg), nb-theme(btn-hero-primary-right-active-bg));
-}
-
-@function btn-hero-success-dark-gradient() {
-  @return
-    linear-gradient(to right, nb-theme(btn-hero-success-left-active-bg), nb-theme(btn-hero-success-right-active-bg));
-}
-
-@function btn-hero-warning-dark-gradient() {
-  @return
-    linear-gradient(to right, nb-theme(btn-hero-warning-left-active-bg), nb-theme(btn-hero-warning-right-active-bg));
-}
+  @include keyframes(button-hero-#{$status}-pulse) {
+    0% {
+      box-shadow: none;
+      opacity: 0.3;
+    }
 
-@function btn-hero-info-dark-gradient() {
-  @return
-    linear-gradient(to right, nb-theme(btn-hero-info-left-active-bg), nb-theme(btn-hero-info-right-active-bg));
-}
-
-@function btn-hero-danger-dark-gradient() {
-  @return
-    linear-gradient(to right, nb-theme(btn-hero-danger-left-active-bg), nb-theme(btn-hero-danger-right-active-bg));
-}
-// End functions
-
-// Help mixins
-@mixin btn-hero-text() {
-  text-shadow: nb-theme(btn-hero-text-shadow);
-}
-
-@mixin btn-hero-hover($light-gradient) {
-  &:hover,
-  .hover {
-    background-image: $light-gradient;
+    100% {
+      box-shadow: 0 0 1rem 0 $left-color;
+      opacity: 0.8;
+    }
   }
 }
 
-@mixin btn-hero-focus($light-gradient) {
-  &:focus,
-  .focus {
-    background-image: $light-gradient;
-  }
-}
-
-@mixin btn-hero-active($dark-gradient) {
-  &:active,
-  .active {
-    background-image: $dark-gradient;
-    box-shadow: none;
-    border-color: transparent;
-  }
-}
-// End help mixins
-
-// Gradient
-@mixin btn-hero-primary-gradient() {
-  @include nb-right-gradient(nb-theme(btn-hero-primary-left-bg), nb-theme(btn-hero-primary-right-bg));
-}
-
-@mixin btn-hero-success-gradient() {
-  @include nb-right-gradient(nb-theme(btn-hero-success-left-bg), nb-theme(btn-hero-success-right-bg));
-}
-
-@mixin btn-hero-warning-gradient() {
-  @include nb-right-gradient(nb-theme(btn-hero-warning-left-bg), nb-theme(btn-hero-warning-right-bg));
-}
-
-@mixin btn-hero-info-gradient() {
-  @include nb-right-gradient(nb-theme(btn-hero-info-left-bg), nb-theme(btn-hero-info-right-bg));
-}
-
-@mixin btn-hero-danger-gradient() {
-  @include nb-right-gradient(nb-theme(btn-hero-danger-left-bg), nb-theme(btn-hero-danger-right-bg));
-}
-
-
-// Bevel
-@function btn-hero-primary-bevel() {
-  @return nb-theme(btn-hero-bevel-size) nb-theme(btn-hero-primary-bevel-color);
-}
-
-@function btn-hero-success-bevel() {
-  @return nb-theme(btn-hero-bevel-size) nb-theme(btn-hero-success-bevel-color);
-}
-
-@function btn-hero-warning-bevel() {
-  @return nb-theme(btn-hero-bevel-size) nb-theme(btn-hero-warning-bevel-color);
-}
-
-@function btn-hero-info-bevel() {
-  @return nb-theme(btn-hero-bevel-size) nb-theme(btn-hero-info-bevel-color);
-}
-
-@function btn-hero-danger-bevel() {
-  @return nb-theme(btn-hero-bevel-size) nb-theme(btn-hero-danger-bevel-color);
-}
-
-// Glow
-@function btn-hero-primary-glow() {
-  @return nb-theme(btn-hero-glow-size) nb-theme(btn-hero-primary-glow-color);
-}
-
-@function btn-hero-success-glow() {
-  @return nb-theme(btn-hero-glow-size) nb-theme(btn-hero-success-glow-color);
-}
-
-@function btn-hero-warning-glow() {
-  @return nb-theme(btn-hero-glow-size) nb-theme(btn-hero-warning-glow-color);
-}
-
-@function btn-hero-info-glow() {
-  @return nb-theme(btn-hero-glow-size) nb-theme(btn-hero-info-glow-color);
-}
-
-@function btn-hero-danger-glow() {
-  @return nb-theme(btn-hero-glow-size) nb-theme(btn-hero-danger-glow-color);
-}
-
-// Bevel-glow-shadow
-@mixin btn-hero-bevel-glow-shadow($bevel, $glow, $shadow) {
-  box-shadow: $bevel, $glow, $shadow;
-}
-
-@mixin btn-hero-primary-bevel-glow-shadow() {
-  $bevel: btn-hero-primary-bevel();
-  $glow: btn-hero-primary-glow();
-  $shadow: nb-theme(btn-hero-shadow);
-
-  @include btn-hero-bevel-glow-shadow($bevel, $glow, $shadow);
-}
-
-@mixin btn-hero-success-bevel-glow-shadow() {
-  $bevel: btn-hero-success-bevel();
-  $glow: btn-hero-success-glow();
-  $shadow: nb-theme(btn-hero-shadow);
-
-  @include btn-hero-bevel-glow-shadow($bevel, $glow, $shadow);
-}
-
-@mixin btn-hero-warning-bevel-glow-shadow() {
-  $bevel: btn-hero-warning-bevel();
-  $glow: btn-hero-warning-glow();
-  $shadow: nb-theme(btn-hero-shadow);
-
-  @include btn-hero-bevel-glow-shadow($bevel, $glow, $shadow);
-}
-
-@mixin btn-hero-info-bevel-glow-shadow() {
-  $bevel: btn-hero-info-bevel();
-  $glow: btn-hero-info-glow();
-  $shadow: nb-theme(btn-hero-shadow);
-
-  @include btn-hero-bevel-glow-shadow($bevel, $glow, $shadow);
-}
-
-@mixin btn-hero-danger-bevel-glow-shadow() {
-  $bevel: btn-hero-danger-bevel();
-  $glow: btn-hero-danger-glow();
-  $shadow: nb-theme(btn-hero-shadow);
-
-  @include btn-hero-bevel-glow-shadow($bevel, $glow, $shadow);
-}
-
-// Border
-@mixin btn-hero-primary-border() {
-  border: none;
-}
-
-@mixin btn-hero-success-border() {
-  border: none;
-}
-
-@mixin btn-hero-warning-border() {
-  border: none;
-}
-
-@mixin btn-hero-info-border() {
-  border: none;
-}
-
-@mixin btn-hero-danger-border() {
-  border: none;
-}
-
-// Hover
-@mixin btn-hero-primary-hover() {
-  @include btn-hero-hover(btn-hero-primary-light-gradient());
-}
-
-@mixin btn-hero-success-hover() {
-  @include btn-hero-hover(btn-hero-success-light-gradient());
-}
-
-@mixin btn-hero-warning-hover() {
-  @include btn-hero-hover(btn-hero-warning-light-gradient());
-}
-
-@mixin btn-hero-info-hover() {
-  @include btn-hero-hover(btn-hero-info-light-gradient());
-}
-
-@mixin btn-hero-danger-hover() {
-  @include btn-hero-hover(btn-hero-danger-light-gradient());
-}
-
-// Focus
-@mixin btn-hero-primary-focus() {
-  @include btn-hero-focus(btn-hero-primary-light-gradient());
-}
-
-@mixin btn-hero-success-focus() {
-  @include btn-hero-focus(btn-hero-success-light-gradient());
-}
-
-@mixin btn-hero-warning-focus() {
-  @include btn-hero-focus(btn-hero-warning-light-gradient());
-}
-
-@mixin btn-hero-info-focus() {
-  @include btn-hero-focus(btn-hero-info-light-gradient());
-}
-
-@mixin btn-hero-danger-focus() {
-  @include btn-hero-focus(btn-hero-danger-light-gradient());
-}
-
-// Active
-@mixin btn-hero-primary-active() {
-  @include btn-hero-active(btn-hero-primary-dark-gradient());
-}
-
-@mixin btn-hero-success-active() {
-  @include btn-hero-active(btn-hero-success-dark-gradient());
-}
-
-@mixin btn-hero-warning-active() {
-  @include btn-hero-active(btn-hero-warning-dark-gradient());
-}
-
-@mixin btn-hero-info-active() {
-  @include btn-hero-active(btn-hero-info-dark-gradient());
-}
-
-@mixin btn-hero-danger-active() {
-  @include btn-hero-active(btn-hero-danger-dark-gradient());
-}
-
-// Disabled
-@mixin btn-hero-disabled() {
-  &:disabled, &.btn-disabled {
-    opacity: nb-theme(btn-disabled-opacity);
-    box-shadow: none;
+@mixin b-btn-heros() {
+  .btn.btn-hero-primary {
+    @include b-btn-hero(primary);
   }
-}
-
-// Line height
-@function btn-hero-line-height($font-size) {
-  @return calc((#{$font-size} * 1.25) + 4px);
-}
 
-@function btn-hero-line-height-lg() {
-  @return btn-hero-line-height(nb-theme(btn-font-size-lg));
-}
-
-@function btn-hero-line-height-md() {
-  @return btn-hero-line-height(nb-theme(btn-font-size-md));
-}
-
-@function btn-hero-line-height-sm() {
-  @return btn-hero-line-height(nb-theme(btn-font-size-sm));
-}
-
-@function btn-hero-line-height-xs() {
-  @return btn-hero-line-height(nb-theme(btn-font-size-xs));
-}
-
-
-@mixin btn-hero-line-height() {
-
-  line-height: btn-hero-line-height-md();
-
-  &.btn.btn-lg {
-    line-height: btn-hero-line-height-lg();
+  .btn.btn-hero-success {
+    @include b-btn-hero(success);
   }
 
-  &.btn.btn-md {
-    line-height: btn-hero-line-height-md();
+  .btn.btn-hero-warning {
+    @include b-btn-hero(warning);
   }
 
-  &.btn.btn-sm {
-    line-height: btn-hero-line-height-sm();
+  .btn.btn-hero-info {
+    @include b-btn-hero(info);
   }
 
-  &.btn.btn-tn {
-    line-height: btn-hero-line-height-xs();
+  .btn.btn-hero-danger {
+    @include b-btn-hero(danger);
   }
 }
-
-// Pulse
-@mixin btn-hero-primary-pulse() {
-  @include btn-pulse(hero-primary, nb-theme(color-primary));
-}
-
-@mixin btn-hero-success-pulse() {
-  @include btn-pulse(hero-success, nb-theme(color-success));
-}
-
-@mixin btn-hero-danger-pulse() {
-  @include btn-pulse(hero-danger, nb-theme(color-danger));
-}
-
-@mixin btn-hero-info-pulse() {
-  @include btn-pulse(hero-info, nb-theme(color-info));
-}
-
-@mixin btn-hero-warning-pulse() {
-  @include btn-pulse(hero-warning, nb-theme(color-warning));
-}
diff --git a/src/framework/bootstrap/styles/_input-group.scss b/src/framework/bootstrap/styles/_input-group.scss
deleted file mode 100644
index 253eae4cc1..0000000000
--- a/src/framework/bootstrap/styles/_input-group.scss
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * @license
- * Copyright Akveo. All Rights Reserved.
- * Licensed under the MIT License. See License.txt in the project root for license information.
- */
-
-@import '../../theme/styles/core/mixins';
-
-@mixin nb-b-input-group-theme() {
-
-  $border-width: nb-theme(form-control-border-width);
-  $border-type: nb-theme(form-control-border-type);
-  $border-color: nb-theme(form-control-border-color);
-  $form-control-border: $border-width $border-type $border-color;
-
-  .input-group-addon,
-  .input-group-icon {
-    font-size: 1.5rem;
-    padding: 0.25rem 1rem;
-    color: nb-theme(form-control-placeholder-color);
-
-    @include nb-ltr() {
-      border-left: $form-control-border;
-      border-right: none;
-    };
-    @include nb-rtl() {
-      border-left: none;
-      border-right: $form-control-border;
-    };
-  }
-
-  .input-group-addon {
-    &.primary {
-      color: nb-theme(color-primary);
-    }
-
-    &.success {
-      color: nb-theme(color-success);
-    }
-
-    &.warning {
-      color: nb-theme(color-warning);
-    }
-
-    &.info {
-      color: nb-theme(color-info);
-    }
-
-    &.danger {
-      color: nb-theme(color-danger);
-    }
-
-    &.secondary {
-      color: nb-theme(color-secondary);
-    }
-  }
-
-  .input-group {
-    .form-control:first-child:not(:only-child),
-    .input-group-addon:first-child,
-    .input-group-prepend .btn:first-child,
-    .input-group-btn .btn:first-child {
-      @include nb-ltr() {
-        border-top-left-radius: nb-theme(form-control-border-radius);
-        border-bottom-left-radius: nb-theme(form-control-border-radius);
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      };
-      @include nb-rtl() {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        border-top-right-radius: nb-theme(form-control-border-radius);
-        border-bottom-right-radius: nb-theme(form-control-border-radius);
-      };
-    }
-    .form-control:last-child:not(:only-child),
-    .input-group-addon:last-child,
-    .input-group-append .btn:last-child,
-    .input-group-btn .btn:last-child {
-      @include nb-ltr() {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        border-top-right-radius: nb-theme(form-control-border-radius);
-        border-bottom-right-radius: nb-theme(form-control-border-radius);
-      };
-      @include nb-rtl() {
-        border-top-left-radius: nb-theme(form-control-border-radius);
-        border-bottom-left-radius: nb-theme(form-control-border-radius);
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      };
-    }
-
-    .dropdown.show .btn.dropdown-toggle {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    .dropup.show .btn.dropdown-toggle {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-    }
-  }
-
-  .input-group-sm > .form-control {
-    font-size: nb-theme(form-control-font-size-sm);
-    padding: nb-theme(form-control-padding-sm);
-    @include install-placeholder(nb-theme(form-control-placeholder-color),
-      nb-theme(form-control-font-size-sm));
-  }
-
-  .input-group-lg > .form-control {
-    font-size: nb-theme(form-control-font-size-lg);
-    padding: nb-theme(form-control-padding-lg);
-    @include install-placeholder(nb-theme(form-control-placeholder-color),
-      nb-theme(form-control-font-size-lg));
-  }
-
-  .input-group-rounded > .form-control {
-    border-radius: nb-theme(form-control-round-border-radius);
-  }
-
-  .input-group-border-only > .form-control {
-    background: transparent;
-  }
-
-  .input-group-fill-only > .form-control {
-    border-color: transparent;
-  }
-
-  .input-group-btn:not(:last-child) > .btn,
-  .input-group-btn:not(:last-child) > .btn-group,
-  .input-group-btn:not(:first-child) > .btn,
-  .input-group-btn:not(:first-child) > .btn-group {
-    margin: 0;
-  }
-}
diff --git a/src/framework/bootstrap/styles/_modals.scss b/src/framework/bootstrap/styles/_modals.scss
index 76b1781800..4dc652a8e0 100644
--- a/src/framework/bootstrap/styles/_modals.scss
+++ b/src/framework/bootstrap/styles/_modals.scss
@@ -3,32 +3,45 @@
  * Copyright Akveo. All Rights Reserved.
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
-
 @import '../../theme/styles/core/mixins';
 
 @mixin nb-b-modals-theme() {
 
   .modal-content {
-    font-size: nb-theme(modal-font-size);
-    line-height: nb-theme(modal-line-height);
-    font-weight: nb-theme(modal-font-weight);
+    display: flex;
+    flex-direction: column;
+    background-color: nb-theme(card-background-color);
+    border: nb-theme(card-border-width) nb-theme(card-border-style) nb-theme(card-border-color);
+    border-radius: nb-theme(card-border-radius);
+    box-shadow: nb-theme(card-shadow);
+
+    color: nb-theme(card-text-color);
+    font-family: nb-theme(card-text-font-family);
+    font-size: nb-theme(card-text-font-size);
+    font-weight: nb-theme(card-text-font-weight);
+    line-height: nb-theme(card-text-line-height);
+
+    // TODO: move card margin style to layout
+    margin-bottom: nb-theme(card-margin-bottom);
 
-    color: nb-theme(modal-fg);
-    background: nb-theme(modal-bg);
-    border-color: nb-theme(modal-border);
-    border-radius: nb-theme(modal-border-radius);
+    @include nb-scrollbars(
+        nb-theme(card-scrollbar-color),
+        nb-theme(card-scrollbar-background-color),
+        nb-theme(card-scrollbar-width));
   }
 
   .modal-header {
-    padding: nb-theme(modal-padding);
-    border-bottom: 1px solid nb-theme(modal-separator);
-    border-top-left-radius: nb-theme(modal-border-radius);
-    border-top-right-radius: nb-theme(modal-border-radius);
-    color: nb-theme(modal-fg-heading);
+    border-bottom-width: 0;
+    padding: nb-theme(card-padding);
+    border-bottom: nb-theme(card-divider-width) nb-theme(card-divider-style) nb-theme(card-divider-color);
+    border-top-left-radius: nb-theme(card-border-radius);
+    border-top-right-radius: nb-theme(card-border-radius);
 
-    font-family: nb-theme(modal-header-font-family);
-    font-weight: nb-theme(modal-header-font-weight);
-    font-size: nb-theme(modal-header-font-size);
+    color: nb-theme(card-header-text-color);
+    font-family: nb-theme(card-header-text-font-family);
+    font-size: nb-theme(card-header-text-font-size);
+    font-weight: nb-theme(card-header-text-font-weight);
+    line-height: nb-theme(card-header-text-line-height);
 
     @include nb-headings();
 
@@ -39,7 +52,8 @@
       @include nb-rtl {
         margin-left: -1rem;
         margin-right: auto;
-      };
+      }
+
 
       &:hover {
         color: nb-theme(modal-fg-heading);
@@ -48,22 +62,25 @@
   }
 
   .modal-body {
-    font-family: nb-theme(modal-body-font-family);
-    font-weight: nb-theme(modal-body-font-weight);
-    font-size: nb-theme(modal-body-font-size);
-
-    padding: nb-theme(modal-padding);
-
+    flex: 1;
+    -ms-flex: 1 1 auto;
+    overflow: auto;
+    padding: nb-theme(card-padding);
+    position: relative;
     @include nb-scrollbars(
-        nb-theme(scrollbar-fg),
-        nb-theme(scrollbar-bg),
-        nb-theme(scrollbar-width));
+        nb-theme(card-scrollbar-color),
+        nb-theme(card-scrollbar-background-color),
+        nb-theme(card-scrollbar-width));
   }
 
   .modal-footer {
-    padding: nb-theme(modal-padding);
-    border-top: 1px solid nb-theme(modal-separator);
-    border-bottom-left-radius: nb-theme(modal-border-radius);
-    border-bottom-right-radius: nb-theme(modal-border-radius);
+    padding: nb-theme(card-padding);
+    border-top: nb-theme(card-divider-width) nb-theme(card-divider-style) nb-theme(card-divider-color);
+    border-bottom-left-radius: nb-theme(card-border-radius);
+    border-bottom-right-radius: nb-theme(card-border-radius);
+  }
+
+  nb-card-header {
+    @include nb-card-header();
   }
 }
diff --git a/src/framework/bootstrap/styles/_outline-buttons.scss b/src/framework/bootstrap/styles/_outline-buttons.scss
index 7dbe28d5b6..462969912e 100644
--- a/src/framework/bootstrap/styles/_outline-buttons.scss
+++ b/src/framework/bootstrap/styles/_outline-buttons.scss
@@ -4,204 +4,55 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-@import 'default-buttons';
-
-@mixin btn-outline() {
-  .btn.btn-outline-primary {
-    @include btn-outline-primary();
+@import 'status-buttons';
+
+@mixin b-btn-outline($status) {
+  background-color: nb-theme(button-outline-background-color);
+  border-style: nb-theme(button-outline-border-style);
+  border-width: nb-theme(button-outline-border-width);
+  text-transform: nb-theme(button-outline-text-transform);
+  border-color: nb-theme(button-outline-#{$status}-border-color);
+  color: nb-theme(button-outline-#{$status}-text-color);
+
+  &:focus {
+    border-color: nb-theme(button-outline-#{$status}-focus-border-color);
+    color: nb-theme(button-outline-#{$status}-focus-text-color);
   }
 
-  .btn.btn-outline-warning {
-    @include btn-outline-warning();
+  &:hover {
+    border-color: nb-theme(button-outline-#{$status}-hover-border-color);
+    color: nb-theme(button-outline-#{$status}-hover-text-color);
   }
 
-  .btn.btn-outline-success {
-    @include btn-outline-success();
+  &:active {
+    border-color: nb-theme(button-outline-#{$status}-active-border-color);
+    color: nb-theme(button-outline-#{$status}-active-text-color);
   }
 
-  .btn.btn-outline-info {
-    @include btn-outline-info();
+  &[disabled] {
+    border-color: nb-theme(button-outline-#{$status}-disabled-border-color);
+    color: nb-theme(button-outline-#{$status}-disabled-text-color);
   }
+}
 
-  .btn.btn-outline-danger {
-    @include btn-outline-danger();
+@mixin b-btn-outlines() {
+  .btn.btn-outline-primary {
+    @include b-btn-outline(primary);
   }
 
-  .btn.btn-outline-secondary {
-    @include btn-outline-secondary();
+  .btn.btn-outline-warning {
+    @include b-btn-outline(warning);
   }
-}
-
-@mixin btn-outline-primary() {
-  @include btn-outline-primary-border();
-  @include btn-outline-fg();
-  @include btn-outline-bg();
-  @include btn-outline-primary-focus();
-  @include btn-outline-primary-hover();
-  @include btn-outline-primary-active();
-}
-
-@mixin btn-outline-warning() {
-  @include btn-outline-warning-border();
-  @include btn-outline-fg();
-  @include btn-outline-bg();
-  @include btn-outline-warning-focus();
-  @include btn-outline-warning-hover();
-  @include btn-outline-warning-active();
-}
-
-@mixin btn-outline-success() {
-  @include btn-outline-success-border();
-  @include btn-outline-fg();
-  @include btn-outline-bg();
-  @include btn-outline-success-focus();
-  @include btn-outline-success-hover();
-  @include btn-outline-success-active();
-}
-
-@mixin btn-outline-info() {
-  @include btn-outline-info-border();
-  @include btn-outline-fg();
-  @include btn-outline-bg();
-  @include btn-outline-info-focus();
-  @include btn-outline-info-hover();
-  @include btn-outline-info-active();
-}
-
-@mixin btn-outline-danger() {
-  @include btn-outline-danger-border();
-  @include btn-outline-fg();
-  @include btn-outline-bg();
-  @include btn-outline-danger-focus();
-  @include btn-outline-danger-hover();
-  @include btn-outline-danger-active();
-}
 
-@mixin btn-outline-secondary() {
-  @include btn-outline-secondary-border();
-  @include btn-outline-fg();
-  @include btn-outline-bg();
-  @include btn-outline-secondary-focus();
-  @include btn-outline-secondary-hover();
-  @include btn-outline-secondary-active();
-
-  &:focus, &.focus,
-  &:hover, &.hover,
-  &:active, &.active {
-    @include btn-outline-fg();
+  .btn.btn-outline-success {
+    @include b-btn-outline(success);
   }
-}
-
-@mixin btn-outline-border($color) {
-  border: 2px solid $color;
-}
-
-@mixin btn-outline-fg() {
-  color: nb-theme(btn-outline-fg);
-}
-
-@mixin btn-outline-bg() {
-  background-color: transparent;
-}
-
-// Hover
-@mixin btn-outline-primary-hover() {
-  @include btn-primary-hover();
-}
-
-@mixin btn-outline-warning-hover() {
-  @include btn-warning-hover();
-}
-
-@mixin btn-outline-success-hover() {
-  @include btn-success-hover();
-}
-
-@mixin btn-outline-info-hover() {
-  @include btn-info-hover();
-}
-
-@mixin btn-outline-danger-hover() {
-  @include btn-danger-hover();
-}
-
-@mixin btn-outline-secondary-hover() {
-  @include btn-secondary-hover();
-}
-
-// Focus
-@mixin btn-outline-primary-focus() {
-  @include btn-outline-focus(btn-focus-color(btn-primary-bg, 20%));
-}
-
-@mixin btn-outline-warning-focus() {
-  @include btn-outline-focus(btn-focus-color(btn-warning-bg, 20%));
-}
-
-@mixin btn-outline-success-focus() {
-  @include btn-outline-focus(btn-focus-color(btn-success-bg, 20%));
-}
-
-@mixin btn-outline-info-focus() {
-  @include btn-outline-focus(btn-focus-color(btn-info-bg, 20%));
-}
-
-@mixin btn-outline-danger-focus() {
-  @include btn-outline-focus(btn-focus-color(btn-danger-bg, 20%));
-}
-
-@mixin btn-outline-secondary-focus() {
-  @include btn-outline-focus(btn-focus-color(btn-secondary-border, 20%));
-}
-
-
-// Active
-@mixin btn-outline-primary-active() {
-  @include btn-primary-active();
-}
-
-@mixin btn-outline-warning-active() {
-  @include btn-warning-active();
-}
-
-@mixin btn-outline-success-active() {
-  @include btn-success-active();
-}
 
-@mixin btn-outline-info-active() {
-  @include btn-info-active();
-}
-
-@mixin btn-outline-danger-active() {
-  @include btn-danger-active();
-}
-
-@mixin btn-outline-secondary-active() {
-  @include btn-secondary-active();
-}
-
-
-// Border
-@mixin btn-outline-primary-border() {
-  @include btn-outline-border(nb-theme(btn-primary-bg));
-}
-
-@mixin btn-outline-warning-border() {
-  @include btn-outline-border(nb-theme(btn-warning-bg));
-}
-
-@mixin btn-outline-success-border() {
-  @include btn-outline-border(nb-theme(btn-success-bg));
-}
-
-@mixin btn-outline-info-border() {
-  @include btn-outline-border(nb-theme(btn-info-bg));
-}
-
-@mixin btn-outline-danger-border() {
-  @include btn-outline-border(nb-theme(btn-danger-bg));
-}
+  .btn.btn-outline-info {
+    @include b-btn-outline(info);
+  }
 
-@mixin btn-outline-secondary-border() {
-  @include btn-outline-border(nb-theme(btn-secondary-border));
+  .btn.btn-outline-danger {
+    @include b-btn-outline(danger);
+  }
 }
diff --git a/src/framework/bootstrap/styles/_shape-buttons.scss b/src/framework/bootstrap/styles/_shape-buttons.scss
index 86fe19536d..cb26c65666 100644
--- a/src/framework/bootstrap/styles/_shape-buttons.scss
+++ b/src/framework/bootstrap/styles/_shape-buttons.scss
@@ -4,28 +4,20 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-@mixin btn-shape() {
+@mixin b-btn-shape($shape) {
+  border-radius: nb-theme(button-#{$shape}-border-radius);
+}
+
+@mixin b-btn-shapes() {
   .btn.btn-rectangle {
-    @include btn-rectangle();
+    @include b-btn-shape(rectangle);
   }
 
   .btn.btn-semi-round {
-    @include btn-semi-round();
+    @include b-btn-shape(semi-round);
   }
 
   .btn.btn-round {
-    @include btn-round();
+    @include b-btn-shape(round);
   }
 }
-
-@mixin btn-rectangle() {
-  border-radius: nb-theme(btn-rectangle-border-radius);
-}
-
-@mixin btn-semi-round() {
-  border-radius: nb-theme(btn-semi-round-border-radius);
-}
-
-@mixin btn-round() {
-  border-radius: nb-theme(btn-round-border-radius);
-}
diff --git a/src/framework/bootstrap/styles/_size-buttons.scss b/src/framework/bootstrap/styles/_size-buttons.scss
index f15157c4a2..59396c3e28 100644
--- a/src/framework/bootstrap/styles/_size-buttons.scss
+++ b/src/framework/bootstrap/styles/_size-buttons.scss
@@ -4,52 +4,26 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-@mixin btn-size() {
+@mixin b-btn-size($size) {
+  font-size: nb-theme(button-#{$size}-text-font-size);
+  line-height: nb-theme(button-#{$size}-text-line-height);
+  padding: nb-theme(button-filled-#{$size}-padding);
+}
+
+@mixin b-btn-sizes() {
   .btn.btn-lg {
-    @include btn-lg();
+    @include b-btn-size(large);
   }
 
   .btn.btn-md {
-    @include btn-md();
+    @include b-btn-size(medium);
   }
 
   .btn.btn-sm {
-    @include btn-sm();
+    @include b-btn-size(small);
   }
 
   .btn.btn-xs {
-    @include btn-xs();
+    @include b-btn-size(tiny);
   }
 }
-
-@mixin btn-lg() {
-  @include button-size(nb-theme(btn-padding-y-lg),
-                       nb-theme(btn-padding-x-lg),
-                       nb-theme(btn-font-size-lg),
-                       nb-theme(btn-line-height),
-                       nb-theme(btn-border-radius));
-}
-
-@mixin btn-md() {
-  @include button-size(nb-theme(btn-padding-y-md),
-                       nb-theme(btn-padding-x-md),
-                       nb-theme(btn-font-size-md),
-                       nb-theme(btn-line-height),
-                       nb-theme(btn-border-radius));
-}
-
-@mixin btn-sm() {
-  @include button-size(nb-theme(btn-padding-y-sm),
-                       nb-theme(btn-padding-x-sm),
-                       nb-theme(btn-font-size-sm),
-                       nb-theme(btn-line-height),
-                       nb-theme(btn-border-radius));
-}
-
-@mixin btn-xs() {
-  @include button-size(nb-theme(btn-padding-y-xs),
-                       nb-theme(btn-padding-x-xs),
-                       nb-theme(btn-font-size-xs),
-                       nb-theme(btn-line-height),
-                       nb-theme(btn-border-radius));
-}
diff --git a/src/framework/bootstrap/styles/_size-form-control.scss b/src/framework/bootstrap/styles/_size-form-control.scss
index c6042aaa17..79fceb56be 100644
--- a/src/framework/bootstrap/styles/_size-form-control.scss
+++ b/src/framework/bootstrap/styles/_size-form-control.scss
@@ -4,28 +4,33 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
+@mixin size($size) {
+  font-size: nb-theme(input-#{$size}-text-font-size);
+  font-weight: nb-theme(input-#{$size}-text-font-weight);
+  line-height: nb-theme(input-#{$size}-text-line-height);
+  padding: nb-theme(input-#{$size}-padding);
+
+  &::placeholder {
+    font-size: nb-theme(input-#{$size}-placeholder-text-font-size);
+    font-weight: nb-theme(input-#{$size}-placeholder-text-font-weight);
+    // TODO: this seems to be unused
+    line-height: nb-theme(input-#{$size}-placeholder-text-line-height);
+  }
+}
+
 @mixin form-control-size() {
+  .input-group-md .form-control,
   .form-control {
-    @include form-control-md();
+    @include size(medium);
   }
 
+  .input-group-sm .form-control,
   .form-control.input-sm {
-    @include form-control-sm();
+    @include size(small);
   }
 
+  .input-group-lg .form-control,
   .form-control.input-lg {
-    @include form-control-lg();
+    @include size(large);
   }
 }
-
-@mixin form-control-sm() {
-  font-size: nb-theme(form-control-font-size-sm);
-}
-
-@mixin form-control-md() {
-  font-size: nb-theme(form-control-font-size);
-}
-
-@mixin form-control-lg() {
-  font-size: nb-theme(form-control-font-size-lg);
-}
diff --git a/src/framework/bootstrap/styles/_status-buttons.scss b/src/framework/bootstrap/styles/_status-buttons.scss
new file mode 100644
index 0000000000..ee881500fe
--- /dev/null
+++ b/src/framework/bootstrap/styles/_status-buttons.scss
@@ -0,0 +1,54 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@mixin b-btn-status($status) {
+  background-color: nb-theme(button-filled-#{$status}-background-color);
+  border-color: nb-theme(button-filled-#{$status}-border-color);
+  color: nb-theme(button-filled-#{$status}-text-color);
+
+  &:focus {
+    border-color: nb-theme(button-filled-#{$status}-focus-border-color);
+  }
+
+  &:hover {
+    background-color: nb-theme(button-filled-#{$status}-hover-background-color);
+    border-color: nb-theme(button-filled-#{$status}-hover-border-color);
+  }
+
+  &:active {
+    background-color: nb-theme(button-filled-#{$status}-active-background-color);
+    border-color: nb-theme(button-filled-#{$status}-active-border-color);
+  }
+
+  &[disabled] {
+    background-color: nb-theme(button-filled-#{$status}-disabled-background-color);
+    border-color: nb-theme(button-filled-#{$status}-disabled-border-color);
+    color: nb-theme(button-filled-#{$status}-disabled-text-color);
+  }
+}
+
+@mixin b-btn-statuses() {
+
+  .btn.btn-primary {
+    @include b-btn-status(primary);
+  }
+
+  .btn.btn-success {
+    @include b-btn-status(success);
+  }
+
+  .btn.btn-warning {
+    @include b-btn-status(warning );
+  }
+
+  .btn.btn-info {
+    @include b-btn-status(info);
+  }
+
+  .btn.btn-danger {
+    @include b-btn-status(danger);
+  }
+}
diff --git a/src/framework/bootstrap/styles/prebuilt/dark.scss b/src/framework/bootstrap/styles/prebuilt/dark.scss
new file mode 100644
index 0000000000..52354d1426
--- /dev/null
+++ b/src/framework/bootstrap/styles/prebuilt/dark.scss
@@ -0,0 +1,14 @@
+/*
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../../../theme/styles/all';
+@import '../globals';
+
+$nb-enabled-themes: (dark);
+
+@include nb-install() {
+  @include nb-bootstrap-global();
+};
diff --git a/src/framework/eva-icons/README.md b/src/framework/eva-icons/README.md
index 6b7e7c8727..e523cab49e 100644
--- a/src/framework/eva-icons/README.md
+++ b/src/framework/eva-icons/README.md
@@ -1 +1,3 @@
 ### @nebular/eva-icons module, more details https://akveo.github.io/nebular/
+
+### This package is deprecated. We suggest using native Angular components instead.
diff --git a/src/playground/without-styles/bootstrap/bootstrap-test.component.html b/src/playground/without-styles/bootstrap/bootstrap-test.component.html
index c092f90b92..4380904d7c 100644
--- a/src/playground/without-styles/bootstrap/bootstrap-test.component.html
+++ b/src/playground/without-styles/bootstrap/bootstrap-test.component.html
@@ -2,9 +2,9 @@
   <nb-layout-column>
     <div class="row">
 
-      <div class="col-lg-6">
+      <div class="col-lg-12">
         <nb-card>
-          <nb-card-header>Buttons</nb-card-header>
+          <nb-card-header>Filled Buttons</nb-card-header>
           <nb-card-body>
             <button class="btn btn-primary">Primary</button>
             <button class="btn btn-success">Success</button>
@@ -15,7 +15,7 @@
         </nb-card>
       </div>
 
-      <div class="col-lg-6">
+      <div class="col-lg-12">
         <nb-card>
           <nb-card-header>Hero Buttons</nb-card-header>
           <nb-card-body>
@@ -28,7 +28,72 @@
         </nb-card>
       </div>
 
-      <div class="col-lg-6">
+      <div class="col-lg-12">
+        <nb-card>
+          <nb-card-header>Outline Buttons</nb-card-header>
+          <nb-card-body>
+            <button class="btn btn-outline-primary">Primary</button>
+            <button class="btn btn-outline-success">Success</button>
+            <button class="btn btn-outline-info">Info</button>
+            <button class="btn btn-outline-warning">Warning</button>
+            <button class="btn btn-outline-danger">Danger</button>
+          </nb-card-body>
+        </nb-card>
+      </div>
+
+      <div class="col-lg-12">
+        <nb-card>
+          <nb-card-header>Button Group</nb-card-header>
+          <nb-card-body>
+            <div
+              class="btn-group btn-group-toggle btn-outline-toggle-group btn-group-full-width btn-toggle-radio-group">
+              <label class="btn btn-outline-primary active">
+                <input type="radio" value="left"> Left
+              </label>
+              <label class="btn btn-outline-primary">
+                <input type="radio" value="middle"> Middle
+              </label>
+              <label class="btn btn-outline-primary">
+                <input type="radio" value="right"> Right
+              </label>
+            </div>
+          </nb-card-body>
+          <nb-card-body>
+            <div class="btn-group btn-group-toggle btn-group-full-width" data-toggle="buttons">
+              <label class="btn btn-primary active">
+                <input type="checkbox"> Left
+              </label>
+              <label class="btn btn-primary">
+                <input type="checkbox"> Middle
+              </label>
+              <label class="btn btn-primary">
+                <input type="checkbox"> Right
+              </label>
+            </div>
+          </nb-card-body>
+          <nb-card-body>
+            <div class="btn-group btn-group-toggle btn-outline-toggle-group" data-toggle="buttons">
+              <label class="btn btn-outline-success active">
+                <input type="radio" [value]="1"> 1
+              </label>
+              <label class="btn btn-outline-success">
+                <input type="radio" [value]="2"> 2
+              </label>
+              <label class="btn btn-outline-success">
+                <input type="radio" [value]="3"> 3
+              </label>
+              <label class="btn btn-outline-success">
+                <input type="radio" [value]="4"> 4
+              </label>
+              <label class="btn btn-outline-success">
+                <input type="radio" [value]="5"> 5
+              </label>
+            </div>
+          </nb-card-body>
+        </nb-card>
+      </div>
+
+      <div class="col-lg-12">
         <nb-card>
           <nb-card-header>Default Inputs</nb-card-header>
           <nb-card-body>
@@ -99,7 +164,7 @@
         </nb-card>
       </div>
 
-      <div class="col-lg-6">
+      <div class="col-lg-12">
         <nb-card>
           <nb-card-header>Input Styles</nb-card-header>
           <nb-card-body>
@@ -177,6 +242,22 @@
           </nb-card-body>
         </nb-card>
       </div>
+
+      <div class="col-lg-12">
+        <nb-card style="height: 15rem;">
+          <nb-card-header>Dropdowns</nb-card-header>
+          <nb-card-body>
+            <div ngbDropdown class="d-inline-block">
+              <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
+              <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
+                <button ngbDropdownItem>Action - 1</button>
+                <button ngbDropdownItem>Another Action</button>
+                <button ngbDropdownItem>Something else is here</button>
+              </div>
+            </div>
+          </nb-card-body>
+        </nb-card>
+      </div>
     </div>
 
   </nb-layout-column>
diff --git a/src/playground/without-styles/bootstrap/bootstrap.module.ts b/src/playground/without-styles/bootstrap/bootstrap.module.ts
index 114c773de2..03bf26bfd2 100644
--- a/src/playground/without-styles/bootstrap/bootstrap.module.ts
+++ b/src/playground/without-styles/bootstrap/bootstrap.module.ts
@@ -6,6 +6,8 @@
 
 import { NgModule } from '@angular/core';
 import { NbCardModule, NbLayoutModule } from '@nebular/theme';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
 import { BootstrapRoutingModule } from './bootstrap-routing.module';
 import { BootstrapTestComponent } from './bootstrap-test.component';
 
@@ -13,6 +15,12 @@ import { BootstrapTestComponent } from './bootstrap-test.component';
   declarations: [
     BootstrapTestComponent,
   ],
-  imports: [ NbLayoutModule, NbCardModule, BootstrapRoutingModule ],
+  imports: [
+    NbLayoutModule,
+    NbCardModule,
+    BootstrapRoutingModule,
+    NgbModule,
+  ],
 })
-export class BootstrapModule {}
+export class BootstrapModule {
+}
diff --git a/src/playground/without-styles/without-styles.module.ts b/src/playground/without-styles/without-styles.module.ts
index f2fd53b605..76d362ccd8 100644
--- a/src/playground/without-styles/without-styles.module.ts
+++ b/src/playground/without-styles/without-styles.module.ts
@@ -5,6 +5,7 @@
  */
 
 import { NgModule } from '@angular/core';
+
 import { WithoutStylesRoutingModule } from './without-styles-routing.module';
 import { WithoutStylesComponent } from './without-styles.component';
 
@@ -12,6 +13,9 @@ import { WithoutStylesComponent } from './without-styles.component';
   declarations: [
     WithoutStylesComponent,
   ],
-  imports: [ WithoutStylesRoutingModule ],
+  imports: [
+    WithoutStylesRoutingModule,
+  ],
 })
-export class WithoutStylesModule {}
+export class WithoutStylesModule {
+}