diff --git a/build/css/custom.css b/build/css/custom.css
index 92321fea..4c017ae0 100644
--- a/build/css/custom.css
+++ b/build/css/custom.css
@@ -2163,7 +2163,7 @@ h4.graph_title {
     line-height: 1.65857;
 }
 
-.tile-stats .count, .tile-stats h3, .tile-stats p {
+.tile-stats .count, .tile-stats h5, .tile-stats p {
     position: relative;
     margin: 0;
     margin-left: 10px;
@@ -2171,7 +2171,7 @@ h4.graph_title {
     padding: 0;
 }
 
-.tile-stats h3 {
+.tile-stats h5 {
     color: #BAB8B8;
 }
 
diff --git a/production/calendar.html b/production/calendar.html
index 9c9ea383..4c6ea3ab 100755
--- a/production/calendar.html
+++ b/production/calendar.html
@@ -291,7 +291,7 @@
 
                                 <div class="col-lg-6 text-right">
                                     <div class="row">
-                                        <div class="offset-md-7 col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
+                                        <div class="offset-md-7 col-md-5 col-sm-5 col-12 form-group pull-right top_search">
                                             <div class="input-group">
                                                 <input type="text" class="form-control" placeholder="Search for...">
                                                 <span class="input-group-btn">
diff --git a/production/chartjs.html b/production/chartjs.html
index b2f8bd60..8ae59b89 100755
--- a/production/chartjs.html
+++ b/production/chartjs.html
@@ -290,7 +290,7 @@
 
                                 <div class="col-lg-6 text-right">
                                     <div cass="row">
-                                        <div class="offset-md-7 col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
+                                        <div class="offset-md-7 col-md-5 col-sm-5 col-12 form-group pull-right top_search">
                                             <div class="input-group">
                                                 <input type="text" class="form-control" placeholder="Search for...">
                                                 <span class="input-group-btn">
@@ -305,7 +305,7 @@
                             <div class="clearfix"></div>
 
                             <div class="row">
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Line graph
@@ -336,7 +336,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Bar graph
@@ -369,7 +369,7 @@
                             </div>
                             <div class="clearfix"></div>
                             <div class="row">
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Radar
@@ -400,7 +400,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Donut Graph
@@ -433,7 +433,7 @@
                             </div>
                             <div class="clearfix"></div>
                             <div class="row">
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Pie Graph Chart
@@ -464,7 +464,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Pie Area Graph
diff --git a/production/chartjs2.html b/production/chartjs2.html
index f1e78aaf..b55c3096 100755
--- a/production/chartjs2.html
+++ b/production/chartjs2.html
@@ -295,7 +295,7 @@
 
                                 <div class="col-lg-6 text-right">
                                     <div class="row">
-                                        <div class="offset-md-7 col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
+                                        <div class="offset-md-7 col-md-5 col-sm-5 col-12 form-group pull-right top_search">
                                             <div class="input-group">
                                                 <input type="text" class="form-control" placeholder="Search for...">
                                                 <span class="input-group-btn">
@@ -310,7 +310,7 @@
                             <div class="clearfix"></div>
 
                             <div class="row">
-                                <div class="col-md-4 col-sm-6 col-xs-12">
+                                <div class="col-md-4 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Line Graph
@@ -341,7 +341,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-4 col-sm-6 col-xs-12">
+                                <div class="col-md-4 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Bar Graph
@@ -372,7 +372,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-4 col-sm-6 col-xs-12">
+                                <div class="col-md-4 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Donut Chart Graph
@@ -403,7 +403,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-4 col-sm-6 col-xs-12">
+                                <div class="col-md-4 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Radar Chart
@@ -434,7 +434,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-4 col-sm-6 col-xs-12">
+                                <div class="col-md-4 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Pie Area Chart
@@ -465,7 +465,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-4 col-sm-6 col-xs-12">
+                                <div class="col-md-4 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Pie Chart Graph
diff --git a/production/e_commerce.html b/production/e_commerce.html
index 87a2388b..65e529e6 100755
--- a/production/e_commerce.html
+++ b/production/e_commerce.html
@@ -286,7 +286,7 @@
                                 </div>
                                 <div class="col-lg-6 text-right">
                                     <div class="row">
-                                        <div class="offset-md-7 col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
+                                        <div class="offset-md-7 col-md-5 col-sm-5 col-12 form-group pull-right top_search">
                                             <div class="input-group">
                                                 <input type="text" class="form-control" placeholder="Search for...">
                                                 <span class="input-group-btn">
@@ -299,7 +299,7 @@
                             </div>
                             <div class="clearfix"></div>
                             <div class="row">
-                                <div class="col-md-12 col-sm-12 col-xs-12">
+                                <div class="col-md-12 col-sm-12 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>E-commerce page design</h2>
@@ -323,7 +323,7 @@
                                         </div>
                                         <div class="x_content">
                                             <div class="row">
-                                                <div class="col-md-7 col-sm-7 col-xs-12">
+                                                <div class="col-md-7 col-sm-7 col-12">
                                                     <div class="product-image">
                                                         <img src="images/prod-1.jpg" alt="..."/>
                                                     </div>
@@ -342,7 +342,7 @@
                                                         </a>
                                                     </div>
                                                 </div>
-                                                <div class="col-md-5 col-sm-5 col-xs-12"
+                                                <div class="col-md-5 col-sm-5 col-12"
                                                      style="border:0px solid #e5e5e5;">
 
                                                     <h3 class="prod_title">LOWA Men’s Renegade GTX Mid Hiking Boots
diff --git a/production/echarts.html b/production/echarts.html
index 9f66af7f..75462cd5 100755
--- a/production/echarts.html
+++ b/production/echarts.html
@@ -290,7 +290,7 @@
 
                                 <div class="col-lg-6 text-right">
                                     <div class="row">
-                                        <div class="offset-md-7 col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
+                                        <div class="offset-md-7 col-md-5 col-sm-5 col-12 form-group pull-right top_search">
                                             <div class="input-group">
                                                 <input type="text" class="form-control" placeholder="Search for...">
                                                 <span class="input-group-btn">
@@ -305,7 +305,7 @@
                             <div class="clearfix"></div>
 
                             <div class="row">
-                                <div class="col-md-8 col-sm-8 col-xs-12">
+                                <div class="col-md-8 col-sm-8 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Bar Graph</h2>
@@ -336,7 +336,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-4 col-sm-4 col-xs-12">
+                                <div class="col-md-4 col-sm-4 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Mini Pie</h2>
@@ -368,7 +368,7 @@
                                 </div>
 
 
-                                <div class="col-md-4 col-sm-4 col-xs-12">
+                                <div class="col-md-4 col-sm-4 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Pie Graph</h2>
@@ -399,7 +399,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-4 col-sm-4 col-xs-12">
+                                <div class="col-md-4 col-sm-4 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Pie Area</h2>
@@ -430,7 +430,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-4 col-sm-4 col-xs-12">
+                                <div class="col-md-4 col-sm-4 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Donut Graph</h2>
@@ -462,7 +462,7 @@
                                 </div>
 
 
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Scatter Graph</h2>
@@ -493,7 +493,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Line Graph</h2>
@@ -524,7 +524,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-4 col-sm-4 col-xs-12">
+                                <div class="col-md-4 col-sm-4 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Horizontal Bar</h2>
@@ -555,7 +555,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-8 col-sm-8 col-xs-12">
+                                <div class="col-md-8 col-sm-8 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>World Map</h2>
@@ -587,7 +587,7 @@
                                 </div>
 
 
-                                <div class="col-md-4 col-sm-4 col-xs-12">
+                                <div class="col-md-4 col-sm-4 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Pyramid</h2>
diff --git a/production/form.html b/production/form.html
index 51395a6c..3dbe64a1 100755
--- a/production/form.html
+++ b/production/form.html
@@ -305,7 +305,7 @@
                                 </div>
 
                                 <div class="title_right">
-                                    <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
+                                    <div class="col-md-5 col-sm-5 col-12 form-group pull-right top_search">
                                         <div class="input-group">
                                             <input type="text" class="form-control" placeholder="Search for...">
                                             <span class="input-group-btn">
@@ -317,12 +317,12 @@
                             </div>
                             <div class="clearfix"></div>
                             <div class="row">
-                                <div class="col-md-12 col-sm-12 col-xs-12">
+                                <div class="col-md-12 col-sm-12 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
-                                            <h2>Form Design
+                                            <h4>Form Design
                                                 <small>different form elements</small>
-                                            </h2>
+                                            </h4>
                                             <ul class="nav navbar-right panel_toolbox">
                                                 <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                                 </li>
@@ -349,45 +349,45 @@
 
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
+                                                        <label class="control-label col-md-3 col-sm-3 col-12"
                                                                for="first-name">First
                                                             Name <span class="required">*</span>
                                                         </label>
-                                                        <div class="col-md-6 col-sm-6 col-xs-12">
+                                                        <div class="col-md-6 col-sm-6 col-12">
                                                             <input type="text" id="first-name" required="required"
-                                                                   class="form-control col-md-7 col-xs-12">
+                                                                   class="form-control col-md-7 col-12">
                                                         </div>
                                                     </div>
                                                 </div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
+                                                        <label class="control-label col-md-3 col-sm-3 col-12"
                                                                for="last-name">Last
                                                             Name <span class="required">*</span>
                                                         </label>
-                                                        <div class="col-md-6 col-sm-6 col-xs-12">
+                                                        <div class="col-md-6 col-sm-6 col-12">
                                                             <input type="text" id="last-name" name="last-name"
                                                                    required="required"
-                                                                   class="form-control col-md-7 col-xs-12">
+                                                                   class="form-control col-md-7 col-12">
                                                         </div>
                                                     </div>
                                                 </div>
                                                 <div class="form-group">
                                                     <div class="row">
                                                         <label for="middle-name"
-                                                               class="control-label col-md-3 col-sm-3 col-xs-12">Middle
+                                                               class="control-label col-md-3 col-sm-3 col-12">Middle
                                                             Name / Initial</label>
-                                                        <div class="col-md-6 col-sm-6 col-xs-12">
+                                                        <div class="col-md-6 col-sm-6 col-12">
                                                             <input id="middle-name"
-                                                                   class="form-control col-md-7 col-xs-12"
+                                                                   class="form-control col-md-7 col-12"
                                                                    type="text" name="middle-name">
                                                         </div>
                                                     </div>
                                                 </div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">Gender</label>
-                                                        <div class="col-md-6 col-sm-6 col-xs-12">
+                                                        <label class="control-label col-md-3 col-sm-3 col-12">Gender</label>
+                                                        <div class="col-md-6 col-sm-6 col-12">
                                                             <div id="gender" class="btn-group" data-toggle="buttons">
                                                                 <label class="btn btn-default"
                                                                        data-toggle-class="btn-primary"
@@ -409,14 +409,14 @@
                                                 </div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">Date Of
+                                                        <label class="control-label col-md-3 col-sm-3 col-12">Date Of
                                                             Birth
                                                             <span
                                                                     class="required">*</span>
                                                         </label>
-                                                        <div class="col-md-6 col-sm-6 col-xs-12">
+                                                        <div class="col-md-6 col-sm-6 col-12">
                                                             <input id="birthday"
-                                                                   class="date-picker form-control col-md-7 col-xs-12"
+                                                                   class="date-picker form-control col-md-7 col-12"
                                                                    required="required" type="text">
                                                         </div>
                                                     </div>
@@ -424,7 +424,7 @@
                                                 <div class="ln_solid"></div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
+                                                        <div class="col-md-6 col-sm-6 col-12 col-md-offset-3">
                                                             <button class="btn btn-primary" type="button">Cancel
                                                             </button>
                                                             <button class="btn btn-primary" type="reset">Reset</button>
@@ -441,12 +441,12 @@
                             </div>
 
                             <div class="row">
-                                <div class="col-md-6 col-xs-12">
+                                <div class="col-md-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
-                                            <h2>Form Design
+                                            <h4>Form Design
                                                 <small>different form elements</small>
-                                            </h2>
+                                            </h4>
                                             <ul class="nav navbar-right panel_toolbox">
                                                 <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                                 </li>
@@ -470,7 +470,7 @@
                                             <br/>
                                             <div class="form-horizontal form-label-left input_mask">
                                                 <div class="row">
-                                                    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
+                                                    <div class="col-md-6 col-sm-6 col-12 form-group has-feedback">
                                                         <input type="text" class="form-control has-feedback-left"
                                                                id="inputSuccess2"
                                                                placeholder="First Name">
@@ -478,14 +478,14 @@
                                                               aria-hidden="true"></span>
                                                     </div>
 
-                                                    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
+                                                    <div class="col-md-6 col-sm-6 col-12 form-group has-feedback">
                                                         <input type="text" class="form-control" id="inputSuccess3"
                                                                placeholder="Last Name">
                                                         <span class="fa fa-user form-control-feedback right"
                                                               aria-hidden="true"></span>
                                                     </div>
 
-                                                    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
+                                                    <div class="col-md-6 col-sm-6 col-12 form-group has-feedback">
                                                         <input type="text" class="form-control has-feedback-left"
                                                                id="inputSuccess4"
                                                                placeholder="Email">
@@ -493,7 +493,7 @@
                                                               aria-hidden="true"></span>
                                                     </div>
 
-                                                    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
+                                                    <div class="col-md-6 col-sm-6 col-12 form-group has-feedback">
                                                         <input type="text" class="form-control" id="inputSuccess5"
                                                                placeholder="Phone">
                                                         <span class="fa fa-phone form-control-feedback right"
@@ -502,9 +502,9 @@
                                                 </div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">Default
+                                                        <label class="control-label col-md-3 col-sm-3 col-12">Default
                                                             Input</label>
-                                                        <div class="col-md-9 col-sm-9 col-xs-12">
+                                                        <div class="col-md-9 col-sm-9 col-12">
                                                             <input type="text" class="form-control"
                                                                    placeholder="Default Input">
                                                         </div>
@@ -512,9 +512,9 @@
                                                 </div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">Disabled
+                                                        <label class="control-label col-md-3 col-sm-3 col-12">Disabled
                                                             Input </label>
-                                                        <div class="col-md-9 col-sm-9 col-xs-12">
+                                                        <div class="col-md-9 col-sm-9 col-12">
                                                             <input type="text" class="form-control" disabled="disabled"
                                                                    placeholder="Disabled Input">
                                                         </div>
@@ -522,9 +522,9 @@
                                                 </div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">Read-Only
+                                                        <label class="control-label col-md-3 col-sm-3 col-12">Read-Only
                                                             Input</label>
-                                                        <div class="col-md-9 col-sm-9 col-xs-12">
+                                                        <div class="col-md-9 col-sm-9 col-12">
                                                             <input type="text" class="form-control" readonly="readonly"
                                                                    placeholder="Read-Only Input">
                                                         </div>
@@ -532,13 +532,13 @@
                                                 </div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">Date Of
+                                                        <label class="control-label col-md-3 col-sm-3 col-12">Date Of
                                                             Birth
                                                             <span
                                                                     class="required">*</span>
                                                         </label>
-                                                        <div class="col-md-9 col-sm-9 col-xs-12">
-                                                            <input class="date-picker form-control col-md-7 col-xs-12"
+                                                        <div class="col-md-9 col-sm-9 col-12">
+                                                            <input class="date-picker form-control col-md-7 col-12"
                                                                    required="required" type="text">
                                                         </div>
                                                     </div>
@@ -546,7 +546,7 @@
                                                 <div class="ln_solid"></div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3">
+                                                        <div class="col-md-9 col-sm-9 col-12 col-md-offset-3">
                                                             <button type="button" class="btn btn-primary">Cancel
                                                             </button>
                                                             <button class="btn btn-primary" type="reset">Reset</button>
@@ -561,7 +561,7 @@
                                     </div>
                                     <div class="x_panel">
                                         <div class="x_title">
-                                            <h2>Star Rating</h2>
+                                            <h4>Star Rating</h4>
                                             <ul class="nav navbar-right panel_toolbox">
                                                 <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                                 </li>
@@ -582,9 +582,9 @@
                                             <div class="clearfix"></div>
                                         </div>
                                         <div class="x_content">
-                                            <h4>Star Ratings
+                                            <h5>Star Ratings
                                                 <small> Hover and click on a star</small>
-                                            </h4>
+                                            </h5>
                                             <div>
                                                 <div class="starrr stars"></div>
                                                 You gave a rating of <span class="stars-count">0</span> star(s)
@@ -599,9 +599,9 @@
 
                                     <div class="x_panel">
                                         <div class="x_title">
-                                            <h2>Registration Form
+                                            <h4>Registration Form
                                                 <small>Click to validate</small>
-                                            </h2>
+                                            </h4>
                                             <ul class="nav navbar-right panel_toolbox">
                                                 <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                                 </li>
@@ -688,12 +688,12 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-md-6 col-xs-12">
+                                <div class="col-md-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
-                                            <h2>Form Basic Elements
+                                            <h4>Form Basic Elements
                                                 <small>different form elements</small>
-                                            </h2>
+                                            </h4>
                                             <ul class="nav navbar-right panel_toolbox">
                                                 <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                                 </li>
@@ -719,9 +719,9 @@
 
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">Default
+                                                        <label class="control-label col-md-3 col-sm-3 col-12">Default
                                                             Input</label>
-                                                        <div class="col-md-9 col-sm-9 col-xs-12">
+                                                        <div class="col-md-9 col-sm-9 col-12">
                                                             <input type="text" class="form-control"
                                                                    placeholder="Default Input">
                                                         </div>
@@ -729,9 +729,9 @@
                                                 </div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">Disabled
+                                                        <label class="control-label col-md-3 col-sm-3 col-12">Disabled
                                                             Input </label>
-                                                        <div class="col-md-9 col-sm-9 col-xs-12">
+                                                        <div class="col-md-9 col-sm-9 col-12">
                                                             <input type="text" class="form-control" disabled="disabled"
                                                                    placeholder="Disabled Input">
                                                         </div>
@@ -739,9 +739,9 @@
                                                 </div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">Read-Only
+                                                        <label class="control-label col-md-3 col-sm-3 col-12">Read-Only
                                                             Input</label>
-                                                        <div class="col-md-9 col-sm-9 col-xs-12">
+                                                        <div class="col-md-9 col-sm-9 col-12">
                                                             <input type="text" class="form-control" readonly="readonly"
                                                                    placeholder="Read-Only Input">
                                                         </div>
@@ -749,12 +749,12 @@
                                                 </div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">Date Of
+                                                        <label class="control-label col-md-3 col-sm-3 col-12">Date Of
                                                             Birth
                                                             <span
                                                                     class="required">*</span>
                                                         </label>
-                                                        <div class="col-md-9 col-sm-9 col-xs-12">
+                                                        <div class="col-md-9 col-sm-9 col-12">
                                                 <textarea class="form-control" rows="3"
                                                           placeholder="Date Of Birth"></textarea>
                                                         </div>
@@ -762,8 +762,8 @@
                                                 </div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">Password</label>
-                                                        <div class="col-md-9 col-sm-9 col-xs-12">
+                                                        <label class="control-label col-md-3 col-sm-3 col-12">Password</label>
+                                                        <div class="col-md-9 col-sm-9 col-12">
                                                             <input type="password" class="form-control"
                                                                    value="passwordonetwo">
                                                         </div>
@@ -771,8 +771,8 @@
                                                 </div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">AutoComplete</label>
-                                                        <div class="col-md-9 col-sm-9 col-xs-12">
+                                                        <label class="control-label col-md-3 col-sm-3 col-12">AutoComplete</label>
+                                                        <div class="col-md-9 col-sm-9 col-12">
                                                             <input type="text" name="country"
                                                                    id="autocomplete-custom-append"
                                                                    class="form-control col-md-10"/>
@@ -781,8 +781,8 @@
                                                 </div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">Select</label>
-                                                        <div class="col-md-9 col-sm-9 col-xs-12">
+                                                        <label class="control-label col-md-3 col-sm-3 col-12">Select</label>
+                                                        <div class="col-md-9 col-sm-9 col-12">
                                                             <select class="form-control">
                                                                 <option>Choose option</option>
                                                                 <option>Option one</option>
@@ -795,9 +795,9 @@
                                                 </div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">Select
+                                                        <label class="control-label col-md-3 col-sm-3 col-12">Select
                                                             Custom</label>
-                                                        <div class="col-md-9 col-sm-9 col-xs-12">
+                                                        <div class="col-md-9 col-sm-9 col-12">
                                                             <select class="select2_single form-control" tabindex="-1">
                                                                 <option></option>
                                                                 <option value="AK">Alaska</option>
@@ -833,9 +833,9 @@
                                                 </div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">Select
+                                                        <label class="control-label col-md-3 col-sm-3 col-12">Select
                                                             Grouped</label>
-                                                        <div class="col-md-9 col-sm-9 col-xs-12">
+                                                        <div class="col-md-9 col-sm-9 col-12">
                                                             <select class="select2_group form-control">
                                                                 <optgroup label="Alaskan/Hawaiian Time Zone">
                                                                     <option value="AK">Alaska</option>
@@ -903,9 +903,9 @@
                                                 </div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">Select
+                                                        <label class="control-label col-md-3 col-sm-3 col-12">Select
                                                             Multiple</label>
-                                                        <div class="col-md-9 col-sm-9 col-xs-12">
+                                                        <div class="col-md-9 col-sm-9 col-12">
                                                             <select class="select2_multiple form-control"
                                                                     multiple="multiple">
                                                                 <option>Choose option</option>
@@ -921,9 +921,9 @@
                                                 </div>
                                                 <div class="control-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">Input
+                                                        <label class="control-label col-md-3 col-sm-3 col-12">Input
                                                             Tags</label>
-                                                        <div class="col-md-9 col-sm-9 col-xs-12">
+                                                        <div class="col-md-9 col-sm-9 col-12">
                                                             <input id="tags_1" type="text" class="tags form-control"
                                                                    value="social, adverts, sales"/>
                                                             <div id="suggestions-container"
@@ -933,14 +933,14 @@
                                                 </div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="col-md-3 col-sm-3 col-xs-12 control-label">Checkboxes
+                                                        <label class="col-md-3 col-sm-3 col-12 control-label">Checkboxes
                                                             and
                                                             radios
                                                             <br>
                                                             <small class="text-navy">Normal Bootstrap elements</small>
                                                         </label>
 
-                                                        <div class="col-md-9 col-sm-9 col-xs-12">
+                                                        <div class="col-md-9 col-sm-9 col-12">
                                                             <div class="checkbox">
                                                                 <label>
                                                                     <input type="checkbox" value=""> Option one. select
@@ -981,14 +981,14 @@
 
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="col-md-3 col-sm-3 col-xs-12 control-label">Checkboxes
+                                                        <label class="col-md-3 col-sm-3 col-12 control-label">Checkboxes
                                                             and
                                                             radios
                                                             <br>
                                                             <small class="text-navy">Normal Bootstrap elements</small>
                                                         </label>
 
-                                                        <div class="col-md-9 col-sm-9 col-xs-12">
+                                                        <div class="col-md-9 col-sm-9 col-12">
                                                             <div class="checkbox">
                                                                 <label>
                                                                     <input type="checkbox" class="flat"
@@ -1046,8 +1046,8 @@
                                                 </div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">Switch</label>
-                                                        <div class="col-md-9 col-sm-9 col-xs-12">
+                                                        <label class="control-label col-md-3 col-sm-3 col-12">Switch</label>
+                                                        <div class="col-md-9 col-sm-9 col-12">
                                                             <div class="">
                                                                 <label>
                                                                     <input type="checkbox" class="js-switch" checked/>
@@ -1081,7 +1081,7 @@
                                                 <div class="ln_solid"></div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3">
+                                                        <div class="col-md-9 col-sm-9 col-12 col-md-offset-3">
                                                             <button type="button" class="btn btn-primary">Cancel
                                                             </button>
                                                             <button type="reset" class="btn btn-primary">Reset</button>
@@ -1097,12 +1097,12 @@
                                 </div>
 
 
-                                <div class="col-md-6 col-sm-12 col-xs-12">
+                                <div class="col-md-6 col-sm-12 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
-                                            <h2>Form Buttons
+                                            <h4>Form Buttons
                                                 <small>Sessions</small>
-                                            </h2>
+                                            </h4>
                                             <ul class="nav navbar-right panel_toolbox">
                                                 <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                                 </li>
@@ -1194,12 +1194,12 @@
                                 </div>
                             </div>
                             <div class="row">
-                                <div class="col-md-12 col-sm-12 col-xs-12">
+                                <div class="col-md-12 col-sm-12 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
-                                            <h2>Text areas
+                                            <h4>Text areas
                                                 <small>Sessions</small>
-                                            </h2>
+                                            </h4>
                                             <ul class="nav navbar-right panel_toolbox">
                                                 <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                                 </li>
@@ -1347,10 +1347,10 @@
 
                                             <div class="form-group">
                                                 <div class="row">
-                                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Resizable
+                                                    <label class="control-label col-md-3 col-sm-3 col-12">Resizable
                                                         Text
                                                         area</label>
-                                                    <div class="col-md-9 col-sm-9 col-xs-12">
+                                                    <div class="col-md-9 col-sm-9 col-12">
                                         <textarea class="resizable_textarea form-control"
                                                   placeholder="This text area automatically resizes its height as you fill in more text courtesy of autosize-master it out..."></textarea>
                                                     </div>
@@ -1362,9 +1362,9 @@
                             </div>
                             <div class="x_panel">
                                 <div class="x_title">
-                                    <h2>Form Input Grid
+                                    <h4>Form Input Grid
                                         <small>form input</small>
-                                    </h2>
+                                    </h4>
                                     <ul class="nav navbar-right panel_toolbox">
                                         <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                         </li>
@@ -1387,119 +1387,119 @@
 
                                     <div class="row">
 
-                                        <div class="col-md-12 col-sm-12 col-xs-12 form-group">
+                                        <div class="col-md-12 col-sm-12 col-12 form-group">
                                             <input type="text" placeholder=".col-md-12" class="form-control">
                                         </div>
 
-                                        <div class="col-md-6 col-sm-12 col-xs-12 form-group">
+                                        <div class="col-md-6 col-sm-12 col-12 form-group">
                                             <input type="text" placeholder=".col-md-6" class="form-control">
                                         </div>
 
-                                        <div class="col-md-6 col-sm-12 col-xs-12 form-group">
+                                        <div class="col-md-6 col-sm-12 col-12 form-group">
                                             <input type="text" placeholder=".col-md-6" class="form-control">
                                         </div>
 
 
-                                        <div class="col-md-4 col-sm-12 col-xs-12 form-group">
+                                        <div class="col-md-4 col-sm-12 col-12 form-group">
                                             <input type="text" placeholder=".col-md-4" class="form-control">
                                         </div>
 
-                                        <div class="col-md-4 col-sm-12 col-xs-12 form-group">
+                                        <div class="col-md-4 col-sm-12 col-12 form-group">
                                             <input type="text" placeholder=".col-md-4" class="form-control">
                                         </div>
 
-                                        <div class="col-md-4 col-sm-12 col-xs-12 form-group">
+                                        <div class="col-md-4 col-sm-12 col-12 form-group">
                                             <input type="text" placeholder=".col-md-4" class="form-control">
                                         </div>
 
 
-                                        <div class="col-md-3 col-sm-12 col-xs-12 form-group">
+                                        <div class="col-md-3 col-sm-12 col-12 form-group">
                                             <input type="text" placeholder=".col-md-3" class="form-control">
                                         </div>
 
-                                        <div class="col-md-3 col-sm-12 col-xs-12 form-group">
+                                        <div class="col-md-3 col-sm-12 col-12 form-group">
                                             <input type="text" placeholder=".col-md-3" class="form-control">
                                         </div>
 
-                                        <div class="col-md-3 col-sm-12 col-xs-12 form-group">
+                                        <div class="col-md-3 col-sm-12 col-12 form-group">
                                             <input type="text" placeholder=".col-md-3" class="form-control">
                                         </div>
 
-                                        <div class="col-md-3 col-sm-12 col-xs-12 form-group">
+                                        <div class="col-md-3 col-sm-12 col-12 form-group">
                                             <input type="text" placeholder=".col-md-3" class="form-control">
                                         </div>
 
 
-                                        <div class="col-md-2 col-sm-12 col-xs-12 form-group">
+                                        <div class="col-md-2 col-sm-12 col-12 form-group">
                                             <input type="text" placeholder=".col-md-2" class="form-control">
                                         </div>
 
-                                        <div class="col-md-2 col-sm-12 col-xs-12 form-group">
+                                        <div class="col-md-2 col-sm-12 col-12 form-group">
                                             <input type="text" placeholder=".col-md-2" class="form-control">
                                         </div>
 
-                                        <div class="col-md-2 col-sm-12 col-xs-12 form-group">
+                                        <div class="col-md-2 col-sm-12 col-12 form-group">
                                             <input type="text" placeholder=".col-md-2" class="form-control">
                                         </div>
 
-                                        <div class="col-md-2 col-sm-12 col-xs-12 form-group">
+                                        <div class="col-md-2 col-sm-12 col-12 form-group">
                                             <input type="text" placeholder=".col-md-2" class="form-control">
                                         </div>
 
-                                        <div class="col-md-2 col-sm-12 col-xs-12 form-group">
+                                        <div class="col-md-2 col-sm-12 col-12 form-group">
                                             <input type="text" placeholder=".col-md-2" class="form-control">
                                         </div>
 
-                                        <div class="col-md-2 col-sm-12 col-xs-12 form-group">
+                                        <div class="col-md-2 col-sm-12 col-12 form-group">
                                             <input type="text" placeholder=".col-md-2" class="form-control">
                                         </div>
 
 
-                                        <div class="col-md-1 col-sm-12 col-xs-12 form-group">
+                                        <div class="col-md-1 col-sm-12 col-12 form-group">
                                             <input type="text" placeholder=".col-md-1" class="form-control">
                                         </div>
 
-                                        <div class="col-md-1 col-sm-12 col-xs-12 form-group">
+                                        <div class="col-md-1 col-sm-12 col-12 form-group">
                                             <input type="text" placeholder=".col-md-1" class="form-control">
                                         </div>
 
-                                        <div class="col-md-1 col-sm-12 col-xs-12 form-group">
+                                        <div class="col-md-1 col-sm-12 col-12 form-group">
                                             <input type="text" placeholder=".col-md-1" class="form-control">
                                         </div>
 
-                                        <div class="col-md-1 col-sm-12 col-xs-12 form-group">
+                                        <div class="col-md-1 col-sm-12 col-12 form-group">
                                             <input type="text" placeholder=".col-md-1" class="form-control">
                                         </div>
 
-                                        <div class="col-md-1 col-sm-12 col-xs-12 form-group">
+                                        <div class="col-md-1 col-sm-12 col-12 form-group">
                                             <input type="text" placeholder=".col-md-1" class="form-control">
                                         </div>
 
-                                        <div class="col-md-1 col-sm-12 col-xs-12 form-group">
+                                        <div class="col-md-1 col-sm-12 col-12 form-group">
                                             <input type="text" placeholder=".col-md-1" class="form-control">
                                         </div>
 
-                                        <div class="col-md-1 col-sm-12 col-xs-12 form-group">
+                                        <div class="col-md-1 col-sm-12 col-12 form-group">
                                             <input type="text" placeholder=".col-md-1" class="form-control">
                                         </div>
 
-                                        <div class="col-md-1 col-sm-12 col-xs-12 form-group">
+                                        <div class="col-md-1 col-sm-12 col-12 form-group">
                                             <input type="text" placeholder=".col-md-1" class="form-control">
                                         </div>
 
-                                        <div class="col-md-1 col-sm-12 col-xs-12 form-group">
+                                        <div class="col-md-1 col-sm-12 col-12 form-group">
                                             <input type="text" placeholder=".col-md-1" class="form-control">
                                         </div>
 
-                                        <div class="col-md-1 col-sm-12 col-xs-12 form-group">
+                                        <div class="col-md-1 col-sm-12 col-12 form-group">
                                             <input type="text" placeholder=".col-md-1" class="form-control">
                                         </div>
 
-                                        <div class="col-md-1 col-sm-12 col-xs-12 form-group">
+                                        <div class="col-md-1 col-sm-12 col-12 form-group">
                                             <input type="text" placeholder=".col-md-1" class="form-control">
                                         </div>
 
-                                        <div class="col-md-1 col-sm-12 col-xs-12 form-group">
+                                        <div class="col-md-1 col-sm-12 col-12 form-group">
                                             <input type="text" placeholder=".col-md-1" class="form-control">
                                         </div>
                                     </div>
@@ -1510,9 +1510,9 @@
 
                             <div class="x_panel">
                                 <div class="x_title">
-                                    <h2>Form Design
+                                    <h4>Form Design
                                         <small>different form elements</small>
-                                    </h2>
+                                    </h4>
                                     <ul class="nav navbar-right panel_toolbox">
                                         <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                         </li>
@@ -1534,7 +1534,7 @@
                                 <div class="x_content">
                                     <br/>
 
-                                    <h4>Horizontal labels</h4>
+                                    <h5>Horizontal labels</h5>
                                     <p class="font-gray-dark">
                                         Using the grid system you can control the position of the labels. The form
                                         example
@@ -1552,7 +1552,7 @@
                                                 </label>
                                                 <div class="col-md-7">
                                                     <input type="text" id="first-name2" required="required"
-                                                           class="form-control col-md-7 col-xs-12">
+                                                           class="form-control col-md-7 col-12">
                                                 </div>
                                             </div>
                                         </div>
@@ -1564,14 +1564,14 @@
                                                 <div class="col-md-7">
                                                     <input type="text" id="last-name2" name="last-name"
                                                            required="required"
-                                                           class="form-control col-md-7 col-xs-12">
+                                                           class="form-control col-md-7 col-12">
                                                 </div>
                                             </div>
                                         </div>
                                     </form>
 
 
-                                    <h4>Vertical labels</h4>
+                                    <h5>Vertical labels</h5>
                                     <p class="font-gray-dark">
                                         For making labels vertical you have two options, either use the apropiate
                                         grid
@@ -1591,7 +1591,7 @@
                                         </form>
                                     </div>
 
-                                    <h4>Inline Form </h4>
+                                    <h5>Inline Form </h5>
                                     <p class="font-gray-dark">
                                         Add .form-inline to your form (which doesn't have to be a &lt;form&gt;) for
                                         left-aligned
diff --git a/production/form_advanced.html b/production/form_advanced.html
index 90c6ab49..253e51bd 100755
--- a/production/form_advanced.html
+++ b/production/form_advanced.html
@@ -304,7 +304,7 @@
 
                                 <div class="text-right col-lg-6">
                                     <div class="row">
-                                        <div class="offset-md-7 col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
+                                        <div class="offset-md-7 col-md-5 col-sm-5 col-12 form-group pull-right top_search">
                                             <div class="input-group">
                                                 <input type="text" class="form-control" placeholder="Search for...">
                                                 <span class="input-group-btn">
@@ -320,7 +320,7 @@
 
                             <div class="row">
                                 <!-- form input mask -->
-                                <div class="col-md-6 col-sm-12 col-xs-12">
+                                <div class="col-md-6 col-sm-12 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Input Mask</h2>
@@ -349,9 +349,9 @@
 
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-3">Date
+                                                        <label class="control-label col-md-3 col-sm-3 col-3">Date
                                                             Mask</label>
-                                                        <div class="col-md-9 col-sm-9 col-xs-9">
+                                                        <div class="col-md-9 col-sm-9 col-9">
                                                             <input type="text" class="form-control"
                                                                    data-inputmask="'mask': '99/99/9999'">
                                                             <span class="fa fa-user form-control-feedback right"
@@ -361,9 +361,9 @@
                                                 </div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-3">Phone
+                                                        <label class="control-label col-md-3 col-sm-3 col-3">Phone
                                                             mask</label>
-                                                        <div class="col-md-9 col-sm-9 col-xs-9">
+                                                        <div class="col-md-9 col-sm-9 col-9">
                                                             <input type="text" class="form-control"
                                                                    data-inputmask="'mask' : '(999) 999-9999'">
                                                             <span class="fa fa-user form-control-feedback right"
@@ -373,9 +373,9 @@
                                                 </div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-3">Custom
+                                                        <label class="control-label col-md-3 col-sm-3 col-3">Custom
                                                             Mask</label>
-                                                        <div class="col-md-9 col-sm-9 col-xs-9">
+                                                        <div class="col-md-9 col-sm-9 col-9">
                                                             <input type="text" class="form-control"
                                                                    data-inputmask="'mask': '99-999999'">
                                                             <span class="fa fa-user form-control-feedback right"
@@ -385,9 +385,9 @@
                                                 </div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-3">Serial
+                                                        <label class="control-label col-md-3 col-sm-3 col-3">Serial
                                                             Number</label>
-                                                        <div class="col-md-9 col-sm-9 col-xs-9">
+                                                        <div class="col-md-9 col-sm-9 col-9">
                                                             <input type="text" class="form-control"
                                                                    data-inputmask="'mask' : '****-****-****-****-****-***'">
                                                             <span class="fa fa-user form-control-feedback right"
@@ -397,9 +397,9 @@
                                                 </div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-3">TaxID
+                                                        <label class="control-label col-md-3 col-sm-3 col-3">TaxID
                                                             Mask</label>
-                                                        <div class="col-md-9 col-sm-9 col-xs-9">
+                                                        <div class="col-md-9 col-sm-9 col-9">
                                                             <input type="text" class="form-control"
                                                                    data-inputmask="'mask' : '99-99999999'">
                                                             <span class="fa fa-user form-control-feedback right"
@@ -409,10 +409,10 @@
                                                 </div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-3">Credit
+                                                        <label class="control-label col-md-3 col-sm-3 col-3">Credit
                                                             Card
                                                             Mask</label>
-                                                        <div class="col-md-9 col-sm-9 col-xs-9">
+                                                        <div class="col-md-9 col-sm-9 col-9">
                                                             <input type="text" class="form-control"
                                                                    data-inputmask="'mask' : '9999-9999-9999-9999'">
                                                             <span class="fa fa-user form-control-feedback right"
@@ -440,7 +440,7 @@
                                 <!-- /form input mask -->
 
                                 <!-- form color picker -->
-                                <div class="col-md-6 col-sm-12 col-xs-12">
+                                <div class="col-md-6 col-sm-12 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Color Picker</h2>
@@ -469,9 +469,9 @@
 
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">Default
+                                                        <label class="control-label col-md-3 col-sm-3 col-12">Default
                                                             Input</label>
-                                                        <div class="col-md-9 col-sm-9 col-xs-12">
+                                                        <div class="col-md-9 col-sm-9 col-12">
                                                             <input type="text" class="demo1 form-control"
                                                                    value="#5367ce"/>
                                                         </div>
@@ -479,8 +479,8 @@
                                                 </div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">Styled</label>
-                                                        <div class="col-md-9 col-sm-9 col-xs-12">
+                                                        <label class="control-label col-md-3 col-sm-3 col-12">Styled</label>
+                                                        <div class="col-md-9 col-sm-9 col-12">
                                                             <div class="input-group demo2">
                                                                 <input type="text" value="#e01ab5"
                                                                        class="form-control"/>
@@ -491,9 +491,9 @@
                                                 </div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">Horizontal
+                                                        <label class="control-label col-md-3 col-sm-3 col-12">Horizontal
                                                             bar</label>
-                                                        <div class="col-md-9 col-sm-9 col-xs-12">
+                                                        <div class="col-md-9 col-sm-9 col-12">
                                                             <input type="text"
                                                                    class="form-control demo colorpicker-element"
                                                                    data-horizontal="true" id="demo_forceformat"
@@ -503,9 +503,9 @@
                                                 </div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">Vertical
+                                                        <label class="control-label col-md-3 col-sm-3 col-12">Vertical
                                                             bar</label>
-                                                        <div class="col-md-9 col-sm-9 col-xs-12">
+                                                        <div class="col-md-9 col-sm-9 col-12">
                                                             <input type="text"
                                                                    class="form-control demo colorpicker-element"
                                                                    id="demo_forceformat3" value="#8fff00">
@@ -514,9 +514,9 @@
                                                 </div>
                                                 <div class="form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">Inline
+                                                        <label class="control-label col-md-3 col-sm-3 col-12">Inline
                                                             picker</label>
-                                                        <div class="col-md-9 col-sm-9 col-xs-12">
+                                                        <div class="col-md-9 col-sm-9 col-12">
                                                             <div class="card bg-light mt-1">
                                                                 <div class="card-body">
                                                                     <div id="demo_cont"
@@ -2016,27 +2016,27 @@
                                         <div class="x_content">
                                             <div class="row grid_slider">
 
-                                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                                <div class="col-md-6 col-sm-6 col-12">
                                                     <p>Default grid slider with min and max values</p>
                                                     <input type="text" id="range" value="" name="range"/>
                                                 </div>
-                                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                                <div class="col-md-6 col-sm-6 col-12">
                                                     <p>Grid with slider labels are far away outside it's container</p>
                                                     <input type="text" id="range_25" value="" name="range"/>
                                                 </div>
-                                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                                <div class="col-md-6 col-sm-6 col-12">
                                                     <p>Grid with labels inside container using force_edges attribute</p>
                                                     <input type="text" id="range_27" value="" name="range"/>
                                                 </div>
-                                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                                <div class="col-md-6 col-sm-6 col-12">
                                                     <p>Create Grid with pre-defined steps</p>
                                                     <input type="text" id="range_26" value="" name="range"/>
                                                 </div>
-                                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                                <div class="col-md-6 col-sm-6 col-12">
                                                     <p>Prevent one from dragging the labels</p>
                                                     <input type="text" id="range_31" value="" name="range"/>
                                                 </div>
-                                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                                <div class="col-md-6 col-sm-6 col-12">
                                                     <p>Grid with minimum and maximum values</p>
                                                     <input type="text" class="range_min_max" value="" name="range"/>
                                                 </div>
diff --git a/production/form_buttons.html b/production/form_buttons.html
index bcb4a229..94305ccf 100755
--- a/production/form_buttons.html
+++ b/production/form_buttons.html
@@ -286,7 +286,7 @@
 
                                 <div class="col-lg-6 text-right">
                                     <div class="row">
-                                        <div class="offset-md-7 col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
+                                        <div class="offset-md-7 col-md-5 col-sm-5 col-12 form-group pull-right top_search">
                                             <div class="input-group">
                                                 <input type="text" class="form-control" placeholder="Search for...">
                                                 <span class="input-group-btn">
diff --git a/production/form_validation.html b/production/form_validation.html
index c1c4eeb3..6a1b120e 100755
--- a/production/form_validation.html
+++ b/production/form_validation.html
@@ -293,7 +293,7 @@
 
                                 <div class="text-right col-lg-6">
                                     <div class="row">
-                                        <div class="offset-md-7 col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
+                                        <div class="offset-md-7 col-md-5 col-sm-5 col-12 form-group pull-right top_search">
                                             <div class="input-group">
                                                 <input type="text" class="form-control" placeholder="Search for...">
                                                 <span class="input-group-btn">
@@ -307,7 +307,7 @@
                             <div class="clearfix"></div>
 
                             <div class="row">
-                                <div class="col-md-12 col-sm-12 col-xs-12">
+                                <div class="col-md-12 col-sm-12 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Form validation
@@ -345,12 +345,12 @@
 
                                                 <div class="item form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
+                                                        <label class="control-label col-md-3 col-sm-3 col-12"
                                                                for="name">Name
                                                             <span class="required">*</span>
                                                         </label>
-                                                        <div class="col-md-6 col-sm-6 col-xs-12">
-                                                            <input id="name" class="form-control col-md-7 col-xs-12"
+                                                        <div class="col-md-6 col-sm-6 col-12">
+                                                            <input id="name" class="form-control col-md-7 col-12"
                                                                    data-validate-length-range="6"
                                                                    data-validate-words="2"
                                                                    name="name" placeholder="both name(s) e.g Jon Doe"
@@ -360,68 +360,68 @@
                                                 </div>
                                                 <div class="item form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
+                                                        <label class="control-label col-md-3 col-sm-3 col-12"
                                                                for="email">Email
                                                             <span class="required">*</span>
                                                         </label>
-                                                        <div class="col-md-6 col-sm-6 col-xs-12">
+                                                        <div class="col-md-6 col-sm-6 col-12">
                                                             <input type="email" id="email" name="email"
                                                                    required="required"
-                                                                   class="form-control col-md-7 col-xs-12">
+                                                                   class="form-control col-md-7 col-12">
                                                         </div>
                                                     </div>
                                                 </div>
                                                 <div class="item form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
+                                                        <label class="control-label col-md-3 col-sm-3 col-12"
                                                                for="email">Confirm
                                                             Email <span class="required">*</span>
                                                         </label>
-                                                        <div class="col-md-6 col-sm-6 col-xs-12">
+                                                        <div class="col-md-6 col-sm-6 col-12">
                                                             <input type="email" id="email2" name="confirm_email"
                                                                    data-validate-linked="email" required="required"
-                                                                   class="form-control col-md-7 col-xs-12">
+                                                                   class="form-control col-md-7 col-12">
                                                         </div>
                                                     </div>
                                                 </div>
                                                 <div class="item form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
+                                                        <label class="control-label col-md-3 col-sm-3 col-12"
                                                                for="number">Number
                                                             <span class="required">*</span>
                                                         </label>
-                                                        <div class="col-md-6 col-sm-6 col-xs-12">
+                                                        <div class="col-md-6 col-sm-6 col-12">
                                                             <input type="number" id="number" name="number"
                                                                    required="required"
                                                                    data-validate-minmax="10,100"
-                                                                   class="form-control col-md-7 col-xs-12">
+                                                                   class="form-control col-md-7 col-12">
                                                         </div>
                                                     </div>
                                                 </div>
                                                 <div class="item form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
+                                                        <label class="control-label col-md-3 col-sm-3 col-12"
                                                                for="website">Website
                                                             URL <span class="required">*</span>
                                                         </label>
-                                                        <div class="col-md-6 col-sm-6 col-xs-12">
+                                                        <div class="col-md-6 col-sm-6 col-12">
                                                             <input type="url" id="website" name="website"
                                                                    required="required"
                                                                    placeholder="www.website.com"
-                                                                   class="form-control col-md-7 col-xs-12">
+                                                                   class="form-control col-md-7 col-12">
                                                         </div>
                                                     </div>
                                                 </div>
                                                 <div class="item form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
+                                                        <label class="control-label col-md-3 col-sm-3 col-12"
                                                                for="occupation">Occupation
                                                             <span class="required">*</span>
                                                         </label>
-                                                        <div class="col-md-6 col-sm-6 col-xs-12">
+                                                        <div class="col-md-6 col-sm-6 col-12">
                                                             <input id="occupation" type="text" name="occupation"
                                                                    data-validate-length-range="5,20"
-                                                                   class="optional form-control col-md-7 col-xs-12">
+                                                                   class="optional form-control col-md-7 col-12">
                                                         </div>
                                                     </div>
                                                 </div>
@@ -429,10 +429,10 @@
                                                     <div class="row">
                                                         <label for="password"
                                                                class="control-label col-md-3">Password</label>
-                                                        <div class="col-md-6 col-sm-6 col-xs-12">
+                                                        <div class="col-md-6 col-sm-6 col-12">
                                                             <input id="password" type="password" name="password"
                                                                    data-validate-length="6,8"
-                                                                   class="form-control col-md-7 col-xs-12"
+                                                                   class="form-control col-md-7 col-12"
                                                                    required="required">
                                                         </div>
                                                     </div>
@@ -440,39 +440,39 @@
                                                 <div class="item form-group">
                                                     <div class="row">
                                                         <label for="password2"
-                                                               class="control-label col-md-3 col-sm-3 col-xs-12">Repeat
+                                                               class="control-label col-md-3 col-sm-3 col-12">Repeat
                                                             Password</label>
-                                                        <div class="col-md-6 col-sm-6 col-xs-12">
+                                                        <div class="col-md-6 col-sm-6 col-12">
                                                             <input id="password2" type="password" name="password2"
                                                                    data-validate-linked="password"
-                                                                   class="form-control col-md-7 col-xs-12"
+                                                                   class="form-control col-md-7 col-12"
                                                                    required="required">
                                                         </div>
                                                     </div>
                                                 </div>
                                                 <div class="item form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
+                                                        <label class="control-label col-md-3 col-sm-3 col-12"
                                                                for="telephone">Telephone
                                                             <span class="required">*</span>
                                                         </label>
-                                                        <div class="col-md-6 col-sm-6 col-xs-12">
+                                                        <div class="col-md-6 col-sm-6 col-12">
                                                             <input type="tel" id="telephone" name="phone"
                                                                    required="required"
                                                                    data-validate-length-range="8,20"
-                                                                   class="form-control col-md-7 col-xs-12">
+                                                                   class="form-control col-md-7 col-12">
                                                         </div>
                                                     </div>
                                                 </div>
                                                 <div class="item form-group">
                                                     <div class="row">
-                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
+                                                        <label class="control-label col-md-3 col-sm-3 col-12"
                                                                for="textarea">Textarea
                                                             <span class="required">*</span>
                                                         </label>
-                                                        <div class="col-md-6 col-sm-6 col-xs-12">
+                                                        <div class="col-md-6 col-sm-6 col-12">
                                                 <textarea id="textarea" required="required" name="textarea"
-                                                          class="form-control col-md-7 col-xs-12"></textarea>
+                                                          class="form-control col-md-7 col-12"></textarea>
                                                         </div>
                                                     </div>
                                                 </div>
diff --git a/production/form_wizards.html b/production/form_wizards.html
index 2d55f2f7..90bd9b43 100755
--- a/production/form_wizards.html
+++ b/production/form_wizards.html
@@ -286,7 +286,7 @@
 
                                 <div class="title_right">
                                     <div class="row">
-                                        <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
+                                        <div class="col-md-5 col-sm-5 col-12 form-group pull-right top_search">
                                             <div class="input-group">
                                                 <input type="text" class="form-control" placeholder="Search for...">
                                                 <span class="input-group-btn">
@@ -301,7 +301,7 @@
 
                             <div class="row">
 
-                                <div class="col-md-12 col-sm-12 col-xs-12">
+                                <div class="col-md-12 col-sm-12 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Form Wizards
@@ -375,46 +375,46 @@
 
                                                         <div class="form-group">
                                                             <div class="row">
-                                                                <label class="offset-md-3 control-label col-md-3 col-sm-3 col-xs-12"
+                                                                <label class="offset-md-3 control-label col-md-3 col-sm-3 col-12"
                                                                        for="first-name">First Name <span
                                                                         class="required">*</span>
                                                                 </label>
-                                                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                                                <div class="col-md-6 col-sm-6 col-12">
                                                                     <input type="text" id="first-name"
                                                                            required="required"
-                                                                           class="form-control col-md-7 col-xs-12">
+                                                                           class="form-control col-md-7 col-12">
                                                                 </div>
                                                             </div>
                                                         </div>
                                                         <div class="form-group">
                                                             <div class="row">
-                                                                <label class="offset-md-3 control-label col-md-3 col-sm-3 col-xs-12"
+                                                                <label class="offset-md-3 control-label col-md-3 col-sm-3 col-12"
                                                                        for="last-name">Last Name <span
                                                                         class="required">*</span>
                                                                 </label>
-                                                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                                                <div class="col-md-6 col-sm-6 col-12">
                                                                     <input type="text" id="last-name" name="last-name"
                                                                            required="required"
-                                                                           class="form-control col-md-7 col-xs-12">
+                                                                           class="form-control col-md-7 col-12">
                                                                 </div>
                                                             </div>
                                                         </div>
                                                         <div class="form-group">
                                                             <div class="row">
                                                                 <label for="middle-name"
-                                                                       class="offset-md-3 control-label col-md-3 col-sm-3 col-xs-12">Middle
+                                                                       class="offset-md-3 control-label col-md-3 col-sm-3 col-12">Middle
                                                                     Name / Initial</label>
-                                                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                                                <div class="col-md-6 col-sm-6 col-12">
                                                                     <input id="middle-name"
-                                                                           class="form-control col-md-7 col-xs-12"
+                                                                           class="form-control col-md-7 col-12"
                                                                            type="text" name="middle-name">
                                                                 </div>
                                                             </div>
                                                         </div>
                                                         <div class="form-group">
                                                             <div class="row">
-                                                                <label class="offset-md-3 control-label col-md-3 col-sm-3 col-xs-12">Gender</label>
-                                                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                                                <label class="offset-md-3 control-label col-md-3 col-sm-3 col-12">Gender</label>
+                                                                <div class="col-md-6 col-sm-6 col-12">
                                                                     <div id="gender" class="btn-group"
                                                                          data-toggle="buttons">
                                                                         <label class="btn btn-default">
@@ -432,12 +432,12 @@
                                                         </div>
                                                         <div class="form-group">
                                                             <div class="row">
-                                                                <label class="offset-md-3 control-label col-md-3 col-sm-3 col-xs-12">Date
+                                                                <label class="offset-md-3 control-label col-md-3 col-sm-3 col-12">Date
                                                                     Of Birth <span class="required">*</span>
                                                                 </label>
-                                                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                                                <div class="col-md-6 col-sm-6 col-12">
                                                                     <input id="birthday"
-                                                                           class="date-picker form-control col-md-7 col-xs-12"
+                                                                           class="date-picker form-control col-md-7 col-12"
                                                                            required="required" type="text">
                                                                 </div>
                                                             </div>
@@ -563,7 +563,7 @@
                                                                 <div class="col-md-6 col-sm-6">
                                                                     <input type="text" id="first-name2"
                                                                            required="required"
-                                                                           class="form-control col-md-7 col-xs-12">
+                                                                           class="form-control col-md-7 col-12">
                                                                 </div>
                                                             </div>
                                                         </div>
@@ -576,7 +576,7 @@
                                                                 <div class="col-md-6 col-sm-6">
                                                                     <input type="text" id="last-name2" name="last-name"
                                                                            required="required"
-                                                                           class="form-control col-md-7 col-xs-12">
+                                                                           class="form-control col-md-7 col-12">
                                                                 </div>
                                                             </div>
                                                         </div>
@@ -588,7 +588,7 @@
                                                                     Initial</label>
                                                                 <div class="col-md-6 col-sm-6">
                                                                     <input id="middle-name2"
-                                                                           class="form-control col-md-7 col-xs-12"
+                                                                           class="form-control col-md-7 col-12"
                                                                            type="text" name="middle-name">
                                                                 </div>
                                                             </div>
@@ -625,7 +625,7 @@
                                                                 </label>
                                                                 <div class="col-md-6 col-sm-6">
                                                                     <input id="birthday2"
-                                                                           class="date-picker form-control col-md-7 col-xs-12"
+                                                                           class="date-picker form-control col-md-7 col-12"
                                                                            required="required" type="text">
                                                                 </div>
                                                             </div>
diff --git a/production/general_elements.html b/production/general_elements.html
index 51823513..5de8de1b 100755
--- a/production/general_elements.html
+++ b/production/general_elements.html
@@ -297,7 +297,7 @@
 
                                 <div class="col-lg-6 text-right">
                                     <div class="row">
-                                        <div class="offset-md-7 col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
+                                        <div class="offset-md-7 col-md-5 col-sm-5 col-12 form-group pull-right top_search">
                                             <div class="input-group">
                                                 <input type="text" class="form-control" placeholder="Search for...">
                                                 <span class="input-group-btn">
@@ -310,7 +310,7 @@
                             </div>
 
                             <div class="row">
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2><i class="fa fa-bars"></i> Tabs
@@ -404,7 +404,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2><i class="fa fa-bars"></i> Tabs
@@ -501,7 +501,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2><i class="fa fa-bars"></i> Tabs
@@ -599,7 +599,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2><i class="fa fa-bars"></i> Vertical Tabs
@@ -666,7 +666,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2><i class="fa fa-bars"></i> Vertical Tabs
@@ -733,7 +733,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2><i class="fa fa-align-left"></i> Collapsible / Accordion
@@ -861,7 +861,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2><i class="fa fa-align-left"></i> Collapsible / Accordion
@@ -992,7 +992,7 @@
 
                             </div>
                             <div class="row">
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Tooltips
@@ -1051,7 +1051,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Tooltips
@@ -1106,7 +1106,7 @@
                                 </div>
                             </div>
                             <div class="row">
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Daily active users
@@ -1220,7 +1220,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Daily active users
@@ -1261,7 +1261,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2><i class="fa fa-chevron-down"></i> Dropdowns
@@ -1383,7 +1383,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2><i class="fa fa-square-o"></i> Modals</h2>
@@ -1502,7 +1502,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2><i class="fa fa-bell"></i> Notifications
@@ -1967,7 +1967,7 @@
                                 </div>
 
                                 <!-- Start to do list -->
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>To Do List
diff --git a/production/glyphicons.html b/production/glyphicons.html
index 6000966c..056e6446 100755
--- a/production/glyphicons.html
+++ b/production/glyphicons.html
@@ -287,7 +287,7 @@
 
                                 <div class="col-lg-6 text-right">
                                     <div class="row">
-                                        <div class="offset-md-7 col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
+                                        <div class="offset-md-7 col-md-5 col-sm-5 col-12 form-group pull-right top_search">
                                             <div class="input-group">
                                                 <input type="text" class="form-control" placeholder="Search for...">
                                                 <span class="input-group-btn">
diff --git a/production/inbox.html b/production/inbox.html
index d6653e40..19229060 100755
--- a/production/inbox.html
+++ b/production/inbox.html
@@ -293,7 +293,7 @@
 
                                 <div class="col-lg-6 text-right">
                                     <div class="row">
-                                        <div class="offset-md-7 col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
+                                        <div class="offset-md-7 col-md-5 col-sm-5 col-12 form-group pull-right top_search">
                                             <div class="input-group">
                                                 <input type="text" class="form-control" placeholder="Search for...">
                                                 <span class="input-group-btn">
diff --git a/production/index.html b/production/index.html
index ed82eb2b..fbab86b3 100755
--- a/production/index.html
+++ b/production/index.html
@@ -294,36 +294,36 @@
                     <div class="right_col col-md-12" role="main">
                         <!-- top tiles -->
                         <div class="row tile_count">
-                            <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
+                            <div class="col-md-2 col-sm-4 col-6 tile_stats_count">
                                 <span class="count_top"><i class="fa fa-user"></i> Total Users</span>
                                 <div class="count">2500</div>
                                 <span class="count_bottom"><i class="green">4% </i> From last Week</span>
                             </div>
-                            <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
+                            <div class="col-md-2 col-sm-4 col-6 tile_stats_count">
                                 <span class="count_top"><i class="fa fa-clock-o"></i> Average Time</span>
                                 <div class="count">123.50</div>
                                 <span class="count_bottom"><i class="green"><i
                                         class="fa fa-sort-asc"></i>3% </i> From last Week</span>
                             </div>
-                            <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
+                            <div class="col-md-2 col-sm-4 col-6 tile_stats_count">
                                 <span class="count_top"><i class="fa fa-user"></i> Total Males</span>
                                 <div class="count green">2,500</div>
                                 <span class="count_bottom"><i class="green"><i
                                         class="fa fa-sort-asc"></i>34% </i> From last Week</span>
                             </div>
-                            <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
+                            <div class="col-md-2 col-sm-4 col-6 tile_stats_count">
                                 <span class="count_top"><i class="fa fa-user"></i> Total Females</span>
                                 <div class="count">4,567</div>
                                 <span class="count_bottom"><i class="red"><i
                                         class="fa fa-sort-desc"></i>12% </i> From last Week</span>
                             </div>
-                            <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
+                            <div class="col-md-2 col-sm-4 col-6 tile_stats_count">
                                 <span class="count_top"><i class="fa fa-user"></i> Total Collections</span>
                                 <div class="count">2,315</div>
                                 <span class="count_bottom"><i class="green"><i
                                         class="fa fa-sort-asc"></i>34% </i> From last Week</span>
                             </div>
-                            <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
+                            <div class="col-md-2 col-sm-4 col-6 tile_stats_count">
                                 <span class="count_top"><i class="fa fa-user"></i> Total Connections</span>
                                 <div class="count">7,325</div>
                                 <span class="count_bottom"><i class="green"><i
@@ -333,7 +333,7 @@
                         <!-- /top tiles -->
 
                         <div class="row">
-                            <div class="col-md-12 col-sm-12 col-xs-12">
+                            <div class="col-md-12 col-sm-12 col-12">
                                 <div class="dashboard_graph">
 
                                     <div class="row x_title">
@@ -351,16 +351,16 @@
                                         </div>
                                     </div>
                                     <div class="row">
-                                        <div class="col-md-9 col-sm-9 col-xs-12">
+                                        <div class="col-md-9 col-sm-9 col-12">
                                             <div id="chart_plot_01" class="demo-placeholder"></div>
                                         </div>
-                                        <div class="col-md-3 col-sm-3 col-xs-12 bg-white">
+                                        <div class="col-md-3 col-sm-3 col-12 bg-white">
                                             <div class="x_title">
-                                                <h2>Top Campaign Performance</h2>
+                                                <h4>Top Campaign Performance</h4>
                                                 <div class="clearfix"></div>
                                             </div>
 
-                                            <div class="col-md-12 col-sm-12 col-xs-6">
+                                            <div class="col-md-12 col-sm-12 col-6">
                                                 <div>
                                                     <p>Facebook Campaign</p>
                                                     <div class="">
@@ -380,7 +380,7 @@
                                                     </div>
                                                 </div>
                                             </div>
-                                            <div class="col-md-12 col-sm-12 col-xs-6">
+                                            <div class="col-md-12 col-sm-12 col-6">
                                                 <div>
                                                     <p>Conventional Media</p>
                                                     <div class="">
@@ -414,10 +414,10 @@
                         <div class="row">
 
 
-                            <div class="col-md-4 col-sm-4 col-xs-12">
+                            <div class="col-md-4 col-sm-4 col-12">
                                 <div class="x_panel tile fixed_height_320">
                                     <div class="x_title">
-                                        <h2>App Versions</h2>
+                                        <h4>App Versions</h4>
                                         <ul class="nav navbar-right panel_toolbox">
                                             <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                             </li>
@@ -534,10 +534,10 @@
                                 </div>
                             </div>
 
-                            <div class="col-md-4 col-sm-4 col-xs-12">
+                            <div class="col-md-4 col-sm-4 col-12">
                                 <div class="x_panel tile fixed_height_320 overflow_hidden">
                                     <div class="x_title">
-                                        <h2>Device Usage</h2>
+                                        <h4>Device Usage</h4>
                                         <ul class="nav navbar-right panel_toolbox">
                                             <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                             </li>
@@ -564,10 +564,10 @@
                                                 </th>
                                                 <th>
                                                     <div class="row">
-                                                        <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
+                                                        <div class="col-lg-7 col-md-7 col-sm-7 col-7">
                                                             <p class="">Device</p>
                                                         </div>
-                                                        <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
+                                                        <div class="col-lg-5 col-md-5 col-sm-5 col-5">
                                                             <p class="">Progress</p>
                                                         </div>
                                                     </div>
@@ -619,10 +619,10 @@
                             </div>
 
 
-                            <div class="col-md-4 col-sm-4 col-xs-12">
+                            <div class="col-md-4 col-sm-4 col-12">
                                 <div class="x_panel tile fixed_height_320">
                                     <div class="x_title">
-                                        <h2>Quick Settings</h2>
+                                        <h4>Quick Settings</h4>
                                         <ul class="nav navbar-right panel_toolbox">
                                             <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                             </li>
@@ -659,7 +659,7 @@
                                             </ul>
 
                                             <div class="sidebar-widget">
-                                                <h4>Profile Completion</h4>
+                                                <h5>Profile Completion</h5>
                                                 <canvas width="150" height="80" id="chart_gauge_01" class=""
                                                         style="width: 160px; height: 100px;"></canvas>
                                                 <div class="goal-wrapper">
@@ -677,12 +677,12 @@
 
 
                         <div class="row">
-                            <div class="col-md-4 col-sm-4 col-xs-12">
+                            <div class="col-md-4 col-sm-4 col-12">
                                 <div class="x_panel">
                                     <div class="x_title">
-                                        <h2>Recent Activities
+                                        <h4>Recent Activities
                                             <small>Sessions</small>
-                                        </h2>
+                                        </h4>
                                         <ul class="nav navbar-right panel_toolbox">
                                             <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                             </li>
@@ -804,17 +804,17 @@
                             </div>
 
 
-                            <div class="col-md-8 col-sm-8 col-xs-12">
+                            <div class="col-md-8 col-sm-8 col-12">
 
 
                                 <div class="row">
 
-                                    <div class="col-md-12 col-sm-12 col-xs-12">
+                                    <div class="col-md-12 col-sm-12 col-12">
                                         <div class="x_panel">
                                             <div class="x_title">
-                                                <h2>Visitors location
+                                                <h4>Visitors location
                                                     <small>geo-presentation</small>
-                                                </h2>
+                                                </h4>
                                                 <ul class="nav navbar-right panel_toolbox">
                                                     <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                                     </li>
@@ -838,7 +838,7 @@
                                                 <div class="dashboard-widget-content">
                                                     <div class="row">
                                                         <div class="col-md-4 hidden-small">
-                                                            <h2 class="line_30">125.7k Views from 60 countries</h2>
+                                                            <h4 class="line_30">125.7k Views from 60 countries</h4>
 
                                                             <table class="countries_list">
                                                                 <tbody>
@@ -865,7 +865,7 @@
                                                                 </tbody>
                                                             </table>
                                                         </div>
-                                                        <div id="world-map-gdp" class="col-md-8 col-sm-12 col-xs-12"
+                                                        <div id="world-map-gdp" class="col-md-8 col-sm-12 col-12"
                                                              style="height:230px;"></div>
                                                     </div>
                                                 </div>
@@ -878,12 +878,12 @@
 
 
                                     <!-- Start to do list -->
-                                    <div class="col-md-6 col-sm-6 col-xs-12">
+                                    <div class="col-md-6 col-sm-6 col-12">
                                         <div class="x_panel">
                                             <div class="x_title">
-                                                <h2>To Do List
+                                                <h4>To Do List
                                                     <small>Sample tasks</small>
-                                                </h2>
+                                                </h4>
                                                 <ul class="nav navbar-right panel_toolbox">
                                                     <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                                     </li>
@@ -973,12 +973,12 @@
                                     <!-- End to do list -->
 
                                     <!-- start of weather widget -->
-                                    <div class="col-md-6 col-sm-6 col-xs-12">
+                                    <div class="col-md-6 col-sm-6 col-12">
                                         <div class="x_panel">
                                             <div class="x_title">
-                                                <h2>Daily active users
+                                                <h4>Daily active users
                                                     <small>Sessions</small>
-                                                </h2>
+                                                </h4>
                                                 <ul class="nav navbar-right panel_toolbox">
                                                     <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                                     </li>
@@ -1016,7 +1016,7 @@
                                                     </div>
                                                     <div class="col-sm-8">
                                                         <div class="weather-text">
-                                                            <h2>Texas <br><i>Partly Cloudy Day</i></h2>
+                                                            <h4>Texas <br><i>Partly Cloudy Day</i></h4>
                                                         </div>
                                                     </div>
                                                 </div>
diff --git a/production/index2.html b/production/index2.html
index 02da7d17..e3039fc0 100755
--- a/production/index2.html
+++ b/production/index2.html
@@ -293,7 +293,7 @@
                                     <div class="tile-stats">
                                         <div class="icon"><i class="fa fa-caret-square-o-right"></i></div>
                                         <div class="count">179</div>
-                                        <h3>New Sign ups</h3>
+                                        <h5>New Sign ups</h5>
                                         <p>Lorem ipsum psdea itgum rixt.</p>
                                     </div>
                                 </div>
@@ -301,7 +301,7 @@
                                     <div class="tile-stats">
                                         <div class="icon"><i class="fa fa-comments-o"></i></div>
                                         <div class="count">179</div>
-                                        <h3>New Sign ups</h3>
+                                        <h5>New Sign ups</h5>
                                         <p>Lorem ipsum psdea itgum rixt.</p>
                                     </div>
                                 </div>
@@ -309,7 +309,7 @@
                                     <div class="tile-stats">
                                         <div class="icon"><i class="fa fa-sort-amount-desc"></i></div>
                                         <div class="count">179</div>
-                                        <h3>New Sign ups</h3>
+                                        <h5>New Sign ups</h5>
                                         <p>Lorem ipsum psdea itgum rixt.</p>
                                     </div>
                                 </div>
@@ -317,7 +317,7 @@
                                     <div class="tile-stats">
                                         <div class="icon"><i class="fa fa-check-square-o"></i></div>
                                         <div class="count">179</div>
-                                        <h3>New Sign ups</h3>
+                                        <h5>New Sign ups</h5>
                                         <p>Lorem ipsum psdea itgum rixt.</p>
                                     </div>
                                 </div>
@@ -327,9 +327,9 @@
                                 <div class="col-md-12">
                                     <div class="x_panel">
                                         <div class="x_title">
-                                            <h2>Transaction Summary
+                                            <h4>Transaction Summary
                                                 <small>Weekly progress</small>
-                                            </h2>
+                                            </h4>
                                             <div class="filter">
                                                 <div id="reportrange" class="pull-right"
                                                      style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
@@ -380,7 +380,7 @@
                                                 <div class="col-md-3 col-sm-12 col-xs-12">
                                                     <div>
                                                         <div class="x_title">
-                                                            <h2>Top Profiles</h2>
+                                                            <h4>Top Profiles</h4>
                                                             <ul class="nav navbar-right panel_toolbox">
                                                                 <li><a class="collapse-link"><i
                                                                         class="fa fa-chevron-up"></i></a>
@@ -478,9 +478,9 @@
                                 <div class="col-md-12">
                                     <div class="x_panel">
                                         <div class="x_title">
-                                            <h2>Weekly Summary
+                                            <h4>Weekly Summary
                                                 <small>Activity shares</small>
-                                            </h2>
+                                            </h4>
                                             <ul class="nav navbar-right panel_toolbox">
                                                 <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                                 </li>
@@ -517,17 +517,17 @@
                                                         <div class="col-md-4">
                                                             <canvas class="canvasDoughnut" height="110" width="110"
                                                                     style="margin: 5px 10px 10px 0"></canvas>
-                                                            <h4 style="margin:0">Bounce Rates</h4>
+                                                            <h5 style="margin:0">Bounce Rates</h5>
                                                         </div>
                                                         <div class="col-md-4">
                                                             <canvas class="canvasDoughnut" height="110" width="110"
                                                                     style="margin: 5px 10px 10px 0"></canvas>
-                                                            <h4 style="margin:0">New Traffic</h4>
+                                                            <h5 style="margin:0">New Traffic</h5>
                                                         </div>
                                                         <div class="col-md-4">
                                                             <canvas class="canvasDoughnut" height="110" width="110"
                                                                     style="margin: 5px 10px 10px 0"></canvas>
-                                                            <h4 style="margin:0">Device Share</h4>
+                                                            <h5 style="margin:0">Device Share</h5>
                                                         </div>
                                                     </div>
                                                 </div>
@@ -542,9 +542,9 @@
                                 <div class="col-md-4">
                                     <div class="x_panel">
                                         <div class="x_title">
-                                            <h2>Top Profiles
+                                            <h4>Top Profiles
                                                 <small>Sessions</small>
-                                            </h2>
+                                            </h4>
                                             <ul class="nav navbar-right panel_toolbox">
                                                 <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                                 </li>
@@ -622,9 +622,9 @@
                                 <div class="col-md-4">
                                     <div class="x_panel">
                                         <div class="x_title">
-                                            <h2>Top Profiles
+                                            <h4>Top Profiles
                                                 <small>Sessions</small>
-                                            </h2>
+                                            </h4>
                                             <ul class="nav navbar-right panel_toolbox">
                                                 <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                                 </li>
@@ -702,9 +702,9 @@
                                 <div class="col-md-4">
                                     <div class="x_panel">
                                         <div class="x_title">
-                                            <h2>Top Profiles
+                                            <h4>Top Profiles
                                                 <small>Sessions</small>
-                                            </h2>
+                                            </h4>
                                             <ul class="nav navbar-right panel_toolbox">
                                                 <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                                 </li>
diff --git a/production/index3.html b/production/index3.html
index 4d1005bd..c28b7b30 100755
--- a/production/index3.html
+++ b/production/index3.html
@@ -330,9 +330,9 @@
                                 <div class="dashboard_graph x_panel">
                                     <div class="row x_title">
                                         <div class="col-md-6">
-                                            <h3>Network Activities
+                                            <h4>Network Activities
                                                 <small>Graph title sub-title</small>
-                                            </h3>
+                                            </h4>
                                         </div>
                                         <div class="col-md-6">
                                             <div id="reportrange" class="pull-right"
@@ -355,9 +355,9 @@
                             <div class="col-md-4 col-sm-6 col-xs-12">
                                 <div class="x_panel fixed_height_320">
                                     <div class="x_title">
-                                        <h2>App Devices
+                                        <h4>App Devices
                                             <small>Sessions</small>
-                                        </h2>
+                                        </h4>
                                         <ul class="nav navbar-right panel_toolbox">
                                             <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                             </li>
@@ -378,7 +378,7 @@
                                         <div class="clearfix"></div>
                                     </div>
                                     <div class="x_content">
-                                        <h4>App Versions</h4>
+                                        <h5>App Versions</h5>
                                         <div class="widget_summary">
                                             <div class="w_left w_25">
                                                 <span>1.5.2</span>
@@ -478,9 +478,9 @@
                             <div class="col-md-4 col-sm-6 col-xs-12">
                                 <div class="x_panel fixed_height_320">
                                     <div class="x_title">
-                                        <h2>Daily users
+                                        <h4>Daily users
                                             <small>Sessions</small>
-                                        </h2>
+                                        </h4>
                                         <ul class="nav navbar-right panel_toolbox">
                                             <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                             </li>
@@ -566,9 +566,9 @@
                             <div class="col-md-4 col-sm-6 col-xs-12">
                                 <div class="x_panel fixed_height_320">
                                     <div class="x_title">
-                                        <h2>Profile Settings
+                                        <h4>Profile Settings
                                             <small>Sessions</small>
-                                        </h2>
+                                        </h4>
                                         <ul class="nav navbar-right panel_toolbox">
                                             <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                             </li>
@@ -600,7 +600,7 @@
                                             </ul>
 
                                             <div class="sidebar-widget">
-                                                <h4>Profile Completion</h4>
+                                                <h5>Profile Completion</h5>
                                                 <canvas width="150" height="80" id="chart_gauge_01" class=""
                                                         style="width: 160px; height: 100px;"></canvas>
                                                 <div class="goal-wrapper">
@@ -618,7 +618,7 @@
                             <div class="col-md-4 col-sm-6 col-xs-12 widget_tally_box">
                                 <div class="x_panel">
                                     <div class="x_title">
-                                        <h2>User Uptake</h2>
+                                        <h4>User Uptake</h4>
                                         <ul class="nav navbar-right panel_toolbox">
                                             <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                             </li>
@@ -714,9 +714,9 @@
                             <div class="col-md-4 col-sm-6 col-xs-12">
                                 <div class="x_panel">
                                     <div class="x_title">
-                                        <h2>Today's Weather
+                                        <h4>Today's Weather
                                             <small>Sessions</small>
-                                        </h2>
+                                        </h4>
                                         <ul class="nav navbar-right panel_toolbox">
                                             <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                             </li>
@@ -757,9 +757,9 @@
                                             </div>
                                             <div class="col-sm-8">
                                                 <div class="weather-text">
-                                                    <h2>Texas
+                                                    <h4>Texas
                                                         <br><i>Partly Cloudy Day</i>
-                                                    </h2>
+                                                    </h4>
                                                 </div>
                                             </div>
                                         </div>
@@ -847,9 +847,9 @@
                             <div class="col-md-4 col-sm-6 col-xs-12">
                                 <div class="x_panel fixed_height_320">
                                     <div class="x_title">
-                                        <h2>Incomes
+                                        <h4>Incomes
                                             <small>Sessions</small>
-                                        </h2>
+                                        </h4>
                                         <ul class="nav navbar-right panel_toolbox">
                                             <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                             </li>
@@ -879,7 +879,7 @@
                                             </ul>
 
                                             <div class="sidebar-widget">
-                                                <h4>Goal</h4>
+                                                <h5>Goal</h5>
                                                 <canvas width="150" height="80" id="chart_gauge_02" class=""
                                                         style="width: 160px; height: 100px;"></canvas>
                                                 <div class="goal-wrapper">
diff --git a/production/invoice.html b/production/invoice.html
index bc85c2f2..f55744d3 100755
--- a/production/invoice.html
+++ b/production/invoice.html
@@ -288,7 +288,7 @@
 
                                 <div class="col-lg-6 text-right">
                                     <div class="row">
-                                        <div class="offset-md-7 col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
+                                        <div class="offset-md-7 col-md-5 col-sm-5 col-12 form-group pull-right top_search">
                                             <div class="input-group">
                                                 <input type="text" class="form-control" placeholder="Search for...">
                                                 <span class="input-group-btn">
@@ -332,7 +332,7 @@
                                             <section class="content invoice">
                                                 <!-- title row -->
                                                 <div class="row">
-                                                    <div class="col-xs-12 col-lg-12 invoice-header">
+                                                    <div class="col-12 col-lg-12 invoice-header">
                                                         <h1 class="row">
                                                             <div class="col-lg-6 text-left">
                                                                 <i class="fa fa-globe"></i> Invoice.
@@ -384,7 +384,7 @@
 
                                                 <!-- Table row -->
                                                 <div class="row">
-                                                    <div class="col-xs-12 table">
+                                                    <div class="col-12 table">
                                                         <table class="table table-striped">
                                                             <thead>
                                                             <tr>
@@ -491,7 +491,7 @@
 
                                                 <!-- this row will not appear when printing -->
                                                 <div class="row no-print">
-                                                    <div class="col-xs-12">
+                                                    <div class="col-12">
                                                         <button class="btn btn-light mr-2" onclick="window.print();"><i
                                                                 class="fa fa-print"></i> Print
                                                         </button>
diff --git a/production/media_gallery.html b/production/media_gallery.html
index 47e96cb3..df578927 100755
--- a/production/media_gallery.html
+++ b/production/media_gallery.html
@@ -296,7 +296,7 @@
 
                                 <div class="col-lg-6 text-right">
                                     <div class="row">
-                                    <div class="offset-md-7 col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
+                                    <div class="offset-md-7 col-md-5 col-sm-5 col-12 form-group pull-right top_search">
                                         <div class="input-group">
                                             <input type="text" class="form-control" placeholder="Search for...">
                                             <span class="input-group-btn">
diff --git a/production/morisjs.html b/production/morisjs.html
index 0b48b5ba..ad4516f2 100755
--- a/production/morisjs.html
+++ b/production/morisjs.html
@@ -288,7 +288,7 @@
 
                                 <div class="col-lg-6 text-right">
                                     <div class="row">
-                                        <div class="offset-md-7 col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
+                                        <div class="offset-md-7 col-md-5 col-sm-5 col-12 form-group pull-right top_search">
                                             <div class="input-group">
                                                 <input type="text" class="form-control" placeholder="Search for...">
                                                 <span class="input-group-btn">
@@ -304,7 +304,7 @@
 
                             <div class="row">
                                 <!-- bar chart -->
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Bar Charts
@@ -336,7 +336,7 @@
                                 <!-- /bar charts -->
 
                                 <!-- bar charts group -->
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Bar Chart Group
@@ -368,7 +368,7 @@
                                 <!-- /bar charts group -->
 
                                 <!-- bar charts group -->
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Bar Chart Group
@@ -400,7 +400,7 @@
                                 <!-- /bar charts group -->
 
                                 <!-- pie chart -->
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Pie Chart
@@ -432,7 +432,7 @@
                                 <!-- /Pie chart -->
 
                                 <!-- graph area -->
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Graph area
@@ -464,7 +464,7 @@
                                 <!-- /graph area -->
 
                                 <!-- line graph -->
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Line Graph
diff --git a/production/other_charts.html b/production/other_charts.html
index 43ea4141..7ef3207d 100755
--- a/production/other_charts.html
+++ b/production/other_charts.html
@@ -289,7 +289,7 @@
                                 </div>
 
                                 <div class="title_right">
-                                    <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
+                                    <div class="col-md-5 col-sm-5 col-12 form-group pull-right top_search">
                                         <div class="input-group">
                                             <input type="text" class="form-control" placeholder="Search for...">
                                             <span class="input-group-btn">
@@ -353,17 +353,17 @@
                                                             element to render highly customizable, very easy to
                                                             implement, simple pie charts for single values.</p>
                                                         <div class="row">
-                                                            <div class="col-xs-4 col-md-4">
+                                                            <div class="col-4 col-md-4">
                               <span class="chart" data-percent="86">
                                               <span class="percent"></span>
                               </span>
                                                             </div>
-                                                            <div class="col-xs-4 col-md-4">
+                                                            <div class="col-4 col-md-4">
                               <span class="chart" data-percent="73">
                                               <span class="percent"></span>
                               </span>
                                                             </div>
-                                                            <div class="col-xs-4 col-md-4">
+                                                            <div class="col-4 col-md-4">
                               <span class="chart" data-percent="60">
                                               <span class="percent"></span>
                               </span>
diff --git a/production/plain_page.html b/production/plain_page.html
index 9326aaf4..1747298c 100755
--- a/production/plain_page.html
+++ b/production/plain_page.html
@@ -287,7 +287,7 @@
 
                                 <div class="col-md-6 text-right">
                                     <div class="row">
-                                        <div class="offset-md-7 col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
+                                        <div class="offset-md-7 col-md-5 col-sm-5 col-12 form-group pull-right top_search">
                                             <div class="input-group">
                                                 <input type="text" class="form-control" placeholder="Search for...">
                                                 <span class="input-group-btn">
@@ -302,7 +302,7 @@
                             <div class="clearfix"></div>
 
                             <div class="row">
-                                <div class="col-md-12 col-sm-12 col-xs-12">
+                                <div class="col-md-12 col-sm-12 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Plain Page</h2>
diff --git a/production/pricing_tables.html b/production/pricing_tables.html
index f20eadbe..87646ecc 100755
--- a/production/pricing_tables.html
+++ b/production/pricing_tables.html
@@ -286,7 +286,7 @@
 
                                 <div class="col-md-6 text-right">
                                     <div class="row">
-                                        <div class="offset-md-7 col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
+                                        <div class="offset-md-7 col-md-5 col-sm-5 col-12 form-group pull-right top_search">
                                             <div class="input-group">
                                                 <input type="text" class="form-control" placeholder="Search for...">
                                                 <span class="input-group-btn">
@@ -301,7 +301,7 @@
                             <div class="clearfix"></div>
 
                             <div class="row">
-                                <div class="col-md-12 col-sm-12 col-xs-12">
+                                <div class="col-md-12 col-sm-12 col-12">
                                     <div class="x_panel" style="height:600px;">
                                         <div class="x_title">
                                             <h2>Pricing Tables Design</h2>
@@ -330,7 +330,7 @@
                                                 <div class="col-md-12">
                                                     <div class="row">
                                                     <!-- price element -->
-                                                    <div class="col-md-3 col-sm-6 col-xs-12">
+                                                    <div class="col-md-3 col-sm-6 col-12">
                                                         <div class="pricing">
                                                             <div class="title">
                                                                 <h2>Tally Box Design</h2>
@@ -377,7 +377,7 @@
                                                     </div>
                                                     <!-- price element -->
                                                     <!-- price element -->
-                                                    <div class="col-md-3 col-sm-6 col-xs-12">
+                                                    <div class="col-md-3 col-sm-6 col-12">
                                                         <div class="pricing ui-ribbon-container">
                                                             <div class="ui-ribbon-wrapper">
                                                                 <div class="ui-ribbon">
@@ -430,7 +430,7 @@
                                                     </div>
                                                     <!-- price element -->
                                                     <!-- price element -->
-                                                    <div class="col-md-3 col-sm-6 col-xs-12">
+                                                    <div class="col-md-3 col-sm-6 col-12">
                                                         <div class="pricing">
                                                             <div class="title">
                                                                 <h2>Tally Box Design</h2>
@@ -478,7 +478,7 @@
                                                     </div>
                                                     <!-- price element -->
                                                     <!-- price element -->
-                                                    <div class="col-md-3 col-sm-6 col-xs-12">
+                                                    <div class="col-md-3 col-sm-6 col-12">
                                                         <div class="pricing">
                                                             <div class="title">
                                                                 <h2>Tally Box Design</h2>
diff --git a/production/tables.html b/production/tables.html
index cefc9b01..d0a6c632 100755
--- a/production/tables.html
+++ b/production/tables.html
@@ -290,7 +290,7 @@
 
                                 <div class="col-lg-6 text-right">
                                     <div class="row">
-                                        <div class="offset-md-7 col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
+                                        <div class="offset-md-7 col-md-5 col-sm-5 col-12 form-group pull-right top_search">
                                             <div class="input-group">
                                                 <input type="text" class="form-control" placeholder="Search for...">
                                                 <span class="input-group-btn">
@@ -305,7 +305,7 @@
                             <div class="clearfix"></div>
 
                             <div class="row">
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Basic Tables
@@ -365,7 +365,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Stripped table
@@ -425,7 +425,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Hover rows
@@ -484,7 +484,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                <div class="col-md-6 col-sm-6 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Boardered table
@@ -544,7 +544,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-md-12 col-sm-12 col-xs-12">
+                                <div class="col-md-12 col-sm-12 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Table design
diff --git a/production/tables_dynamic.html b/production/tables_dynamic.html
index cef52f60..536484f1 100755
--- a/production/tables_dynamic.html
+++ b/production/tables_dynamic.html
@@ -296,7 +296,7 @@
 
                                 <div class="col-lg-6 text-right">
                                     <div class="row">
-                                        <div class="offset-md-7 col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
+                                        <div class="offset-md-7 col-md-5 col-sm-5 col-12 form-group pull-right top_search">
                                             <div class="input-group">
                                                 <input type="text" class="form-control" placeholder="Search for...">
                                                 <span class="input-group-btn">
@@ -311,7 +311,7 @@
                             <div class="clearfix"></div>
 
                             <div class="row">
-                                <div class="col-md-12 col-sm-12 col-xs-12">
+                                <div class="col-md-12 col-sm-12 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Default Example
@@ -817,7 +817,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-12 col-sm-12 col-xs-12">
+                                <div class="col-md-12 col-sm-12 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Plus Table Design</small></h2>
@@ -1496,7 +1496,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-12 col-sm-12 col-xs-12">
+                                <div class="col-md-12 col-sm-12 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Button Example
@@ -2003,7 +2003,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-12 col-sm-12 col-xs-12">
+                                <div class="col-md-12 col-sm-12 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Fixed Header Example
@@ -2509,7 +2509,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-12 col-sm-12 col-xs-12">
+                                <div class="col-md-12 col-sm-12 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>KeyTable example
@@ -3023,7 +3023,7 @@
                                     </div>
                                 </div>
 
-                                <div class="col-md-12 col-sm-12 col-xs-12">
+                                <div class="col-md-12 col-sm-12 col-12">
                                     <div class="x_panel">
                                         <div class="x_title">
                                             <h2>Responsive example
diff --git a/production/typography.html b/production/typography.html
index 97c2682e..e9bdb741 100755
--- a/production/typography.html
+++ b/production/typography.html
@@ -286,7 +286,7 @@
 
                                 <div class="col-lg-6 text-right">
                                     <div class="row">
-                                        <div class="offset-md-7 col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
+                                        <div class="offset-md-7 col-md-5 col-sm-5 col-12 form-group pull-right top_search">
                                             <div class="input-group">
                                                 <input type="text" class="form-control" placeholder="Search for...">
                                                 <span class="input-group-btn">
diff --git a/production/widgets.html b/production/widgets.html
index 00895173..23ac8325 100755
--- a/production/widgets.html
+++ b/production/widgets.html
@@ -296,7 +296,7 @@
 
                                 <div class="col-lg-6 text-right">
                                     <div class="row">
-                                        <div class="offset-md-7 col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
+                                        <div class="offset-md-7 col-md-5 col-sm-5 col-12 form-group pull-right top_search">
                                             <div class="input-group">
                                                 <input type="text" class="form-control" placeholder="Search for...">
                                                 <span class="input-group-btn">
@@ -315,7 +315,7 @@
                                     <div class="">
                                         <div class="x_content">
                                             <div class="row">
-                                                <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
+                                                <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-12">
                                                     <div class="tile-stats">
                                                         <div class="icon"><i class="fa fa-caret-square-o-right"></i>
                                                         </div>
@@ -325,7 +325,7 @@
                                                         <p>Lorem ipsum psdea itgum rixt.</p>
                                                     </div>
                                                 </div>
-                                                <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
+                                                <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-12">
                                                     <div class="tile-stats">
                                                         <div class="icon"><i class="fa fa-comments-o"></i>
                                                         </div>
@@ -335,7 +335,7 @@
                                                         <p>Lorem ipsum psdea itgum rixt.</p>
                                                     </div>
                                                 </div>
-                                                <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
+                                                <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-12">
                                                     <div class="tile-stats">
                                                         <div class="icon"><i class="fa fa-sort-amount-desc"></i>
                                                         </div>
@@ -345,7 +345,7 @@
                                                         <p>Lorem ipsum psdea itgum rixt.</p>
                                                     </div>
                                                 </div>
-                                                <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
+                                                <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-12">
                                                     <div class="tile-stats">
                                                         <div class="icon"><i class="fa fa-check-square-o"></i>
                                                         </div>
@@ -395,7 +395,7 @@
 
                                             <br/>
                                             <div class="row row-eq-height">
-                                                <div class="col-md-3 col-xs-12 widget widget_tally_box">
+                                                <div class="col-md-3 col-12 widget widget_tally_box">
                                                     <div class="x_panel">
                                                         <div class="x_title">
                                                             <h2>Tally Design</h2>
@@ -472,7 +472,7 @@
                                                 </div>
 
 
-                                                <div class="col-md-3 col-xs-12 widget widget_tally_box">
+                                                <div class="col-md-3 col-12 widget widget_tally_box">
                                                     <div class="x_panel ">
                                                         <div class="x_title">
                                                             <h2>Sales Close</h2>
@@ -570,7 +570,7 @@
                                                 </div>
 
 
-                                                <div class="col-md-3 col-xs-12 widget widget_tally_box">
+                                                <div class="col-md-3 col-12 widget widget_tally_box">
                                                     <div class="x_panel ui-ribbon-container ">
                                                         <div class="ui-ribbon-wrapper">
                                                             <div class="ui-ribbon">
@@ -603,7 +603,7 @@
                                                 </div>
 
 
-                                                <div class="col-md-3 col-xs-12 widget widget_tally_box">
+                                                <div class="col-md-3 col-12 widget widget_tally_box">
                                                     <div class="x_panel ">
                                                         <div class="x_content">
 
@@ -653,7 +653,7 @@
                                                     </div>
                                                 </div>
 
-                                                <div class="col-md-3 col-xs-12 widget widget_tally_box">
+                                                <div class="col-md-3 col-12 widget widget_tally_box">
                                                     <div class="x_panel">
                                                         <div class="x_title">
                                                             <h2>Tally Design1</h2>
@@ -743,7 +743,7 @@
                                                 </div>
 
 
-                                                <div class="col-md-3 col-xs-12 widget widget_tally_box">
+                                                <div class="col-md-3 col-12 widget widget_tally_box">
                                                     <div class="x_panel">
                                                         <div class="x_title">
                                                             <h2>Tally Design2</h2>
@@ -833,7 +833,7 @@
                                                 </div>
 
 
-                                                <div class="col-md-3 col-xs-12 widget widget_tally_box">
+                                                <div class="col-md-3 col-12 widget widget_tally_box">
                                                     <div class="x_panel">
                                                         <div class="x_title">
                                                             <h2>Tally Design3</h2>
@@ -922,7 +922,7 @@
                                                     </div>
                                                 </div>
 
-                                                <div class="col-md-3 col-xs-12 widget widget_tally_box">
+                                                <div class="col-md-3 col-12 widget widget_tally_box">
                                                     <div class="x_panel">
                                                         <div class="x_title">
                                                             <h2>Tally Design4</h2>