Просмотр исходного кода

css fix / heading fixes part 1 / bs4 columns implementation part 1

razvanaldea89 6 лет назад
Родитель
Сommit
aee73ad726

+ 2 - 2
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;
 }
 

+ 1 - 1
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">

+ 7 - 7
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

+ 7 - 7
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

+ 4 - 4
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

+ 11 - 11
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>

+ 118 - 118
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

+ 31 - 31
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>

+ 1 - 1
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">

+ 31 - 31
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>

Некоторые файлы не были показаны из-за большого количества измененных файлов