diff --git a/src/app/pages/dashboard/dashboard.html b/src/app/pages/dashboard/dashboard.html
index 4bedf6aa51..2df1ae2acb 100644
--- a/src/app/pages/dashboard/dashboard.html
+++ b/src/app/pages/dashboard/dashboard.html
@@ -1,36 +1,36 @@
 <div class="row">
-  <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
+  <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
     <pie-chart></pie-chart>
   </div>
 </div>
 
 <div class="row">
-  <ba-card class="col-xlg-6 col-xl-6 col-lg-12 col-sm-12 col-xs-12"
+  <ba-card class="col-xlg-6 col-xl-6 col-lg-12 col-sm-12 col-12"
                      title="general.dashboard.acquisitionChannels" baCardClass="traffic-panel medium-card">
     <traffic-chart></traffic-chart>
   </ba-card>
 
-  <ba-card class="col-xlg-6 col-xl-6 col-lg-12 col-sm-12 col-xs-12"
+  <ba-card class="col-xlg-6 col-xl-6 col-lg-12 col-sm-12 col-12"
            title="general.dashboard.usersByCountry" baCardClass="medium-card">
     <users-map></users-map>
   </ba-card>
 </div>
 
 <div class="row">
-  <div class="col-xlg-9 col-xl-6 col-lg-6  col-md-12 col-sm-12 col-xs-12">
+  <div class="col-xlg-9 col-xl-6 col-lg-6  col-md-12 col-sm-12 col-12">
     <div class="row">
-      <ba-card class="col-xlg-8 col-xl-12 col-lg-12 col-md-7 col-sm-12 col-xs-12"
+      <ba-card class="col-xlg-8 col-xl-12 col-lg-12 col-md-7 col-sm-12 col-12"
                title="general.dashboard.revenue" baCardClass="medium-card">
         <line-chart></line-chart>
       </ba-card>
-      <ba-card class="col-xlg-4 col-xl-12 col-lg-12 col-md-5 col-sm-12 col-xs-12"
+      <ba-card class="col-xlg-4 col-xl-12 col-lg-12 col-md-5 col-sm-12 col-12"
                baCardClass="popular-app medium-card">
         <popular-app></popular-app>
       </ba-card>
     </div>
   </div>
 
-  <div class="col-xlg-3 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12">
+  <div class="col-xlg-3 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
     <ba-card title="general.dashboard.feed"
              baCardClass="large-card with-scroll feed-panel">
       <feed></feed>
@@ -40,11 +40,11 @@
 </div>
 
 <div class="row shift-up">
-  <ba-card class="col-xlg-3 col-lg-6 col-md-12 col-sm-12 col-xs-12" title="general.dashboard.toDoList"
+  <ba-card class="col-xlg-3 col-lg-6 col-md-12 col-sm-12 col-12" title="general.dashboard.toDoList"
            baCardClass="xmedium-card feed-comply-panel with-scroll todo-panel">
     <todo></todo>
   </ba-card>
-  <ba-card class="col-xlg-6 col-lg-6 col-md-12 col-sm-12 col-xs-12" title="general.dashboard.calendar"
+  <ba-card class="col-xlg-6 col-lg-6 col-md-12 col-sm-12 col-12" title="general.dashboard.calendar"
            baCardClass="xmedium-card feed-comply-panel with-scroll calendar-panel">
     <calendar></calendar>
   </ba-card>
diff --git a/src/app/pages/dashboard/pieChart/pieChart.html b/src/app/pages/dashboard/pieChart/pieChart.html
index b685fc46f3..878d2ebc91 100644
--- a/src/app/pages/dashboard/pieChart/pieChart.html
+++ b/src/app/pages/dashboard/pieChart/pieChart.html
@@ -1,6 +1,6 @@
 <div class="row pie-charts">
 
-  <ba-card *ngFor="let chart of charts" class="pie-chart-item-container col-xlg-3 col-lg-3 col-md-6 col-sm-12 col-xs-12">
+  <ba-card *ngFor="let chart of charts" class="pie-chart-item-container col-xlg-3 col-lg-3 col-md-6 col-sm-12 col-12">
 
     <div class="pie-chart-item">
       <div class="chart" [attr.data-rel]="chart.color" data-percent="60">
diff --git a/src/app/pages/dashboard/popularApp/popularApp.html b/src/app/pages/dashboard/popularApp/popularApp.html
index bb5d365a32..88a0b44e92 100644
--- a/src/app/pages/dashboard/popularApp/popularApp.html
+++ b/src/app/pages/dashboard/popularApp/popularApp.html
@@ -5,23 +5,23 @@
   </div>
 </div>
 <div class="popular-app-cost row">
-  <div class="col-xs-9">
+  <div class="col-9">
     Most Popular App
   </div>
-  <div class="col-xs-3 text-right">
+  <div class="col-3 text-right">
     175$
   </div>
 </div>
 <div class="popular-app-info row">
-  <div class="col-xs-4 text-left">
+  <div class="col-4 text-left">
     <div class="info-label">Total Visits</div>
     <div>47,512</div>
   </div>
-  <div class="col-xs-4 text-center">
+  <div class="col-4 text-center">
     <div class="info-label">New Visits</div>
     <div>9,217</div>
   </div>
-  <div class="col-xs-4 text-right">
+  <div class="col-4 text-right">
     <div class="info-label">Sales</div>
     <div>2,928</div>
   </div>
diff --git a/src/app/pages/ui/components/buttons/components/dropdownButtons/dropdownButtons.html b/src/app/pages/ui/components/buttons/components/dropdownButtons/dropdownButtons.html
index b3c10f1a76..8178cc89c6 100644
--- a/src/app/pages/ui/components/buttons/components/dropdownButtons/dropdownButtons.html
+++ b/src/app/pages/ui/components/buttons/components/dropdownButtons/dropdownButtons.html
@@ -1,5 +1,5 @@
 <div class="row btns-row">
-  <div class="col-sm-4 col-xs-6">
+  <div class="col-sm-4 col-6">
     <div class="btn-group" ngbDropdown>
       <button type="button" class="btn btn-primary" ngbDropdownToggle>
         Primary
@@ -13,7 +13,7 @@
       </ul>
     </div>
   </div>
-  <div class="col-sm-4 col-xs-6">
+  <div class="col-sm-4 col-6">
     <div class="btn-group" ngbDropdown>
       <button type="button" class="btn btn-success" ngbDropdownToggle>
         Success
@@ -27,7 +27,7 @@
       </ul>
     </div>
   </div>
-  <div class="col-sm-4 col-xs-6">
+  <div class="col-sm-4 col-6">
     <div class="btn-group" ngbDropdown>
       <button type="button" class="btn btn-info" ngbDropdownToggle>
         Info
@@ -41,7 +41,7 @@
       </ul>
     </div>
   </div>
-  <div class="col-sm-4 col-xs-6">
+  <div class="col-sm-4 col-6">
     <div class="btn-group" ngbDropdown>
       <button type="button" class="btn btn-default" ngbDropdownToggle>
         Default
@@ -55,7 +55,7 @@
       </ul>
     </div>
   </div>
-  <div class="col-sm-4 col-xs-6">
+  <div class="col-sm-4 col-6">
     <div class="btn-group" ngbDropdown>
       <button type="button" class="btn btn-warning" ngbDropdownToggle>
         Warning
@@ -69,7 +69,7 @@
       </ul>
     </div>
   </div>
-  <div class="col-sm-4 col-xs-6">
+  <div class="col-sm-4 col-6">
     <div class="btn-group" ngbDropdown>
       <button type="button" class="btn btn-danger" ngbDropdownToggle>
         Danger
@@ -88,7 +88,7 @@
 <h5 class="panel-subtitle">Split button dropdowns</h5>
 
 <div class="row btns-row">
-  <div class="col-sm-4 col-xs-6 col-lg-4 col-md-6">
+  <div class="col-sm-4 col-6 col-lg-4 col-md-6">
     <div class="btn-group flex-dropdown" ngbDropdown>
       <button type="button" class="btn btn-primary">Primary</button>
       <button type="button" class="btn btn-primary" ngbDropdownToggle>
@@ -103,7 +103,7 @@ <h5 class="panel-subtitle">Split button dropdowns</h5>
       </ul>
     </div>
   </div>
-  <div class="col-sm-4 col-xs-6 col-lg-4 col-md-6">
+  <div class="col-sm-4 col-6 col-lg-4 col-md-6">
     <div class="btn-group flex-dropdown" ngbDropdown>
       <button type="button" class="btn btn-success">Success</button>
       <button type="button" class="btn btn-success" ngbDropdownToggle>
@@ -118,7 +118,7 @@ <h5 class="panel-subtitle">Split button dropdowns</h5>
       </ul>
     </div>
   </div>
-  <div class="col-sm-4 col-xs-6 col-lg-4 col-md-6">
+  <div class="col-sm-4 col-6 col-lg-4 col-md-6">
     <div class="btn-group flex-dropdown" ngbDropdown>
       <button type="button" class="btn btn-info">Info</button>
       <button type="button" class="btn btn-info" ngbDropdownToggle>
@@ -133,7 +133,7 @@ <h5 class="panel-subtitle">Split button dropdowns</h5>
       </ul>
     </div>
   </div>
-  <div class="col-sm-4 col-xs-6 col-lg-4 col-md-6">
+  <div class="col-sm-4 col-6 col-lg-4 col-md-6">
     <div class="btn-group flex-dropdown" ngbDropdown>
       <button type="button" class="btn btn-default">Default</button>
       <button type="button" class="btn btn-default" ngbDropdownToggle>
@@ -148,7 +148,7 @@ <h5 class="panel-subtitle">Split button dropdowns</h5>
       </ul>
     </div>
   </div>
-  <div class="col-sm-4 col-xs-6 col-lg-4 col-md-6">
+  <div class="col-sm-4 col-6 col-lg-4 col-md-6">
     <div class="btn-group flex-dropdown" ngbDropdown>
       <button type="button" class="btn btn-warning">Warning</button>
       <button type="button" class="btn btn-warning" ngbDropdownToggle>
@@ -163,7 +163,7 @@ <h5 class="panel-subtitle">Split button dropdowns</h5>
       </ul>
     </div>
   </div>
-  <div class="col-sm-4 col-xs-6 col-lg-4 col-md-6">
+  <div class="col-sm-4 col-6 col-lg-4 col-md-6">
     <div class="btn-group flex-dropdown" ngbDropdown>
       <button type="button" class="btn btn-danger">Danger</button>
       <button type="button" class="btn btn-danger" ngbDropdownToggle>
diff --git a/src/app/pages/ui/components/buttons/components/largeButtons/largeButtons.html b/src/app/pages/ui/components/buttons/components/largeButtons/largeButtons.html
index 4c1810223f..c6314e5dd8 100644
--- a/src/app/pages/ui/components/buttons/components/largeButtons/largeButtons.html
+++ b/src/app/pages/ui/components/buttons/components/largeButtons/largeButtons.html
@@ -1,20 +1,20 @@
 <div class="row btns-row btns-same-width-lg">
-  <div class="col-sm-4 col-xs-6">
+  <div class="col-sm-4 col-6">
     <button type="button" class="btn btn-primary btn-lg">Primary</button>
   </div>
-  <div class="col-sm-4 col-xs-6">
+  <div class="col-sm-4 col-6">
     <button type="button" class="btn btn-success btn-lg">Success</button>
   </div>
-  <div class="col-sm-4 col-xs-6">
+  <div class="col-sm-4 col-6">
     <button type="button" class="btn btn-info btn-lg">Info</button>
   </div>
-  <div class="col-sm-4 col-xs-6">
+  <div class="col-sm-4 col-6">
     <button type="button" class="btn btn-default btn-lg">Default</button>
   </div>
-  <div class="col-sm-4 col-xs-6">
+  <div class="col-sm-4 col-6">
     <button type="button" class="btn btn-warning btn-lg">Warning</button>
   </div>
-  <div class="col-sm-4 col-xs-6">
+  <div class="col-sm-4 col-6">
     <button type="button" class="btn btn-danger btn-lg">Danger</button>
   </div>
 </div>
diff --git a/src/app/pages/ui/components/typography/typography.html b/src/app/pages/ui/components/typography/typography.html
index 5344bfd1ac..445fcfe613 100644
--- a/src/app/pages/ui/components/typography/typography.html
+++ b/src/app/pages/ui/components/typography/typography.html
@@ -1,7 +1,7 @@
 <div class="widgets">
 
   <div class="typography-document-samples row">
-    <div class="col-xlg-3 col-lg-6  col-md-6 col-sm-6 col-xs-12 typography-widget">
+    <div class="col-xlg-3 col-lg-6  col-md-6 col-sm-6 col-12 typography-widget">
 
       <ba-card title="Text Size" baCardClass="with-scroll heading-widget">
 
@@ -37,7 +37,7 @@ <h5>H5. Heading 5</h5>
       </ba-card>
     </div>
 
-    <div class="col-xlg-3 col-lg-6  col-md-6 col-sm-6 col-xs-12 typography-widget">
+    <div class="col-xlg-3 col-lg-6  col-md-6 col-sm-6 col-12 typography-widget">
 
       <ba-card title="Some more text" baCardClass="with-scroll more-text-widget">
 
@@ -81,7 +81,7 @@ <h5>H5. Heading 5</h5>
       </ba-card>
     </div>
 
-    <div class="col-xlg-3 col-lg-6  col-md-6 col-sm-6 col-xs-12 typography-widget">
+    <div class="col-xlg-3 col-lg-6  col-md-6 col-sm-6 col-12 typography-widget">
 
       <ba-card title="Lists" baCardClass="with-scroll lists-widget">
 
@@ -126,7 +126,7 @@ <h5 class="list-header">Ordered Lists:</h5>
       </ba-card>
     </div>
 
-    <div class="col-xlg-3 col-lg-6  col-md-6 col-sm-6 col-xs-12 typography-widget">
+    <div class="col-xlg-3 col-lg-6  col-md-6 col-sm-6 col-12 typography-widget">
 
       <ba-card title="Text Color" baCardClass="with-scroll color-widget">
         <div class="section-block red-text ">
@@ -165,7 +165,7 @@ <h5 class="list-header">Ordered Lists:</h5>
 
 
   <div class="row">
-    <div class="col-lg-12 col-sm-12 col-xs-12">
+    <div class="col-lg-12 col-sm-12 col-12">
 
       <ba-card baCardClass="banner-column-panel">
         <div class="banner">