diff --git a/src/app/pages/dashboard/security-cameras/security-cameras.component.html b/src/app/pages/dashboard/security-cameras/security-cameras.component.html
index 06c103e1..54863311 100644
--- a/src/app/pages/dashboard/security-cameras/security-cameras.component.html
+++ b/src/app/pages/dashboard/security-cameras/security-cameras.component.html
@@ -19,7 +19,7 @@
       </div>
     </div>
     <div class="cameras" *ngIf="!isSingleView">
-      <div class="camera col-sm-6 col-xs-12" *ngFor="let camera of cameras" [style.background-image]="'url(' + camera.source + ')'"
+      <div class="camera col-sm-6" *ngFor="let camera of cameras" [style.background-image]="'url(' + camera.source + ')'"
            (click)="selectCamera(camera)">
         <span>{{ camera.title }}</span>
       </div>
diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.html b/src/app/pages/forms/form-inputs/form-inputs.component.html
index 4b7deb4b..fb11ab12 100644
--- a/src/app/pages/forms/form-inputs/form-inputs.component.html
+++ b/src/app/pages/forms/form-inputs/form-inputs.component.html
@@ -7,10 +7,10 @@
           <input type="text" placeholder="Project" class="form-control"/>
         </div>
         <div class="row full-name-inputs">
-          <div class="col-xs-12 col-sm-6 input-group">
+          <div class="col-sm-6 input-group">
             <input type="text" placeholder="Nick" class="form-control"/>
           </div>
-          <div class="col-xs-12 col-sm-6 input-group">
+          <div class="col-sm-6 input-group">
             <input type="text" placeholder="Last Name" class="form-control"/>
           </div>
         </div>
@@ -145,9 +145,9 @@
           <input type="text" placeholder="Input with Danger" class="form-control form-control-danger">
         </div>
         <div class="form-group validation-checkboxes row">
-          <nb-checkbox status="success" class="col-xs-4">Checkbox with Success</nb-checkbox>
-          <nb-checkbox status="warning" class="col-xs-4">Checkbox with Warning</nb-checkbox>
-          <nb-checkbox status="danger" class="col-xs-4">Checkbox with Danger</nb-checkbox>
+          <nb-checkbox status="success" class="col-sm-4">Checkbox with Success</nb-checkbox>
+          <nb-checkbox status="warning" class="col-sm-4">Checkbox with Warning</nb-checkbox>
+          <nb-checkbox status="danger" class="col-sm-4">Checkbox with Danger</nb-checkbox>
         </div>
         <div class="form-group has-success">
           <input type="text" placeholder="Input with Success Icon" class="form-control form-control-success">
@@ -165,7 +165,7 @@
       <nb-card-header>Checkboxes & Radios</nb-card-header>
       <nb-card-body>
         <div class="row demo-checkboxes-radio">
-          <div class="demo-checkboxes col-xs-4">
+          <div class="demo-checkboxes col-sm-4">
             <nb-checkbox>Checkbox 1</nb-checkbox>
             <nb-checkbox [value]="true">Checkbox 2</nb-checkbox>
             <label class="custom-control custom-checkbox">
@@ -174,7 +174,7 @@
               <span class="custom-control-description">Bootstrap Checkbox</span>
             </label>
           </div>
-          <div class="demo-radio col-xs-4">
+          <div class="demo-radio col-sm-4">
             <label class="custom-control custom-radio">
               <input type="radio" class="custom-control-input" name="customRadio">
               <span class="custom-control-indicator"></span>
@@ -191,7 +191,7 @@
               <span class="custom-control-description">Radio 3</span>
             </label>
           </div>
-          <div class="demo-disabled-checkbox-radio col-xs-4">
+          <div class="demo-disabled-checkbox-radio col-sm-4">
             <nb-checkbox disabled>Disabled Checkbox</nb-checkbox>
             <label class="custom-control custom-radio">
               <input type="radio" class="custom-control-input" disabled>
diff --git a/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.html b/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.html
index 9a809507..1590858b 100644
--- a/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.html
+++ b/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.html
@@ -2,7 +2,7 @@
   <nb-card-header>Hero Buttons</nb-card-header>
   <nb-card-body>
     <div class="row">
-      <div class="example-container col-xs-12 col-sm-6 col-md-4 col-xl-3 col-xxxl-2" *ngFor="let hb of settings">
+      <div class="example-container col-sm-6 col-md-4 col-xl-3 col-xxxl-2" *ngFor="let hb of settings">
         <div class="container-title">
           <span>{{ hb.title }}</span>
         </div>