Merge pull request #831 from ColorlibHQ/bootstrap4_Update

Bootstrap4 update

build/css/custom.css

@@ -1126,15 +1126,6 @@ body .container.body .right_col {
   padding: 0px; }
 
 @media (max-width: 991px) {
-  .info-number .badge {
-    font-size: 10px;
-    font-weight: normal;
-    line-height: 13px;
-    padding: 2px 6px;
-    position: absolute;
-    right: 135px;
-    top: 6px; }
-
   .nav-md .container.body .right_col, .nav-md .container.body .top_nav {
     width: 100%;
     margin: 0; }
@@ -1157,7 +1148,7 @@ body .container.body .right_col {
     font-size: 17px; }
 
   .tile, .graph {
-    zoom: 85%;
+    zoom: 76%;
     height: inherit; }
 
   .item {
@@ -1333,7 +1324,7 @@ table.no-margin .progress {
   margin: 0 auto;
   float: none !important; }
 
-.col-md-55, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
+.col-md-55, .col-xs-12, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-sm-12, .col-md-12, .col-lg-12 {
   position: relative;
   min-height: 1px;
   float: left;
@@ -2012,15 +2003,6 @@ table.jambo_table tbody tr.selected td {
   font-size: 14px;
   background-color: white; }
 
-.dataTables_length {
-  width: 40%;
-  float: left; }
-
-.dataTables_filter {
-  width: 50%;
-  float: right;
-  text-align: right; }
-
 .dataTables_info {
   width: 60%;
   float: left; }
@@ -2418,7 +2400,6 @@ a.user-profile {
   margin-right: 10px; }
 
 ul.top_profiles {
-  height: 330px;
   width: 100%; }
 
 ul.top_profiles li {
@@ -4855,6 +4836,28 @@ ul.notifications {
   padding: 9px 0;
   border-top: 1px solid #E6E9ED; }
 
+@media (min-width: 360px) and (max-width: 812px) {
+  .info-number .badge {
+    font-size: 10px;
+    font-weight: normal;
+    line-height: 13px;
+    padding: 2px 6px;
+    position: absolute;
+    right: 135px;
+    top: 7px; }
+
+  .tile, .graph {
+    zoom: 71%;
+    height: inherit; } }
+@media (min-width: 768px) and (max-width: 1024px) {
+  .info-number .badge {
+    font-size: 10px;
+    font-weight: normal;
+    line-height: 13px;
+    padding: 2px 6px;
+    position: absolute;
+    right: -2px;
+    top: -6px; } }
 /** /PNotify **/
 /** FullCalendar **/
 .fc-state-default {

production/index3.html

@@ -436,7 +436,7 @@
               </div>
 
               <div class="col-md-4 col-sm-6 ">
-                <div class="x_panel fixed_height_320">
+                <div class="x_panel tile fixed_height_320">
                   <div class="x_title">
                     <h2>Daily users <small>Sessions</small></h2>
                     <ul class="nav navbar-right panel_toolbox">

production/tables_dynamic.html

@@ -10,6 +10,7 @@
     <title>DataTables | Gentelella</title>
 
     <!-- Bootstrap -->
+    <link href="cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
     <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
     <!-- Font Awesome -->
     <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
@@ -18,6 +19,7 @@
     <!-- iCheck -->
     <link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet">
     <!-- Datatables -->
+    
     <link href="../vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
     <link href="../vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
     <link href="../vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet">
@@ -292,7 +294,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 ">
                 <div class="x_panel">
                   <div class="x_title">
                     <h2>Default Example <small>Users</small></h2>
@@ -312,6 +314,9 @@
                     <div class="clearfix"></div>
                   </div>
                   <div class="x_content">
+                      <div class="row">
+                          <div class="col-sm-12">
+                            <div class="card-box table-responsive">
                     <p class="text-muted font-13 m-b-30">
                       DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: <code>$().DataTable();</code>
                     </p>
@@ -788,10 +793,13 @@
                       </tbody>
                     </table>
                   </div>
+                  </div>
+              </div>
+            </div>
                 </div>
               </div>
 
-              <div class="col-md-12 col-sm-12 col-xs-12">
+              <div class="col-md-12 col-sm-12 ">
                 <div class="x_panel">
                   <div class="x_title">
                     <h2>Plus Table Design</small></h2>
@@ -811,6 +819,9 @@
                     <div class="clearfix"></div>
                   </div>
                   <div class="x_content">
+                      <div class="row">
+                          <div class="col-sm-12">
+                            <div class="card-box table-responsive">
                     <p class="text-muted font-13 m-b-30">
                       DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: <code>$().DataTable();</code>
                     </p>
@@ -1461,10 +1472,13 @@
                       </tbody>
                     </table>
                   </div>
+                  </div>
+              </div>
+            </div>
                 </div>
               </div>
 
-              <div class="col-md-12 col-sm-12 col-xs-12">
+              <div class="col-md-12 col-sm-12 ">
                 <div class="x_panel">
                   <div class="x_title">
                     <h2>Button Example <small>Users</small></h2>
@@ -1484,6 +1498,9 @@
                     <div class="clearfix"></div>
                   </div>
                   <div class="x_content">
+                      <div class="row">
+                          <div class="col-sm-12">
+                            <div class="card-box table-responsive">
                     <p class="text-muted font-13 m-b-30">
                       The Buttons extension for DataTables provides a common set of options, API methods and styling to display buttons on a page that will interact with a DataTable. The core library provides the based framework upon which plug-ins can built.
                     </p>
@@ -1962,8 +1979,11 @@
                   </div>
                 </div>
               </div>
+            </div>
+                </div>
+              </div>
 
-              <div class="col-md-12 col-sm-12 col-xs-12">
+              <div class="col-md-12 col-sm-12 ">
                 <div class="x_panel">
                   <div class="x_title">
                     <h2>Fixed Header Example <small>Users</small></h2>
@@ -1983,6 +2003,9 @@
                     <div class="clearfix"></div>
                   </div>
                   <div class="x_content">
+                      <div class="row">
+                          <div class="col-sm-12">
+                            <div class="card-box table-responsive">
                     <p class="text-muted font-13 m-b-30">
                       This example shows FixedHeader being styling by the Bootstrap CSS framework.
                     </p>
@@ -2461,8 +2484,11 @@
                   </div>
                 </div>
               </div>
+            </div>
+                </div>
+              </div>
 
-              <div class="col-md-12 col-sm-12 col-xs-12">
+              <div class="col-md-12 col-sm-12 ">
                 <div class="x_panel">
                   <div class="x_title">
                     <h2>KeyTable example <small>Users</small></h2>
@@ -2968,7 +2994,7 @@
                 </div>
               </div>
 
-              <div class="col-md-12 col-sm-12 col-xs-12">
+              <div class="col-md-12 col-sm-12 ">
                 <div class="x_panel">
                   <div class="x_title">
                     <h2>Responsive example<small>Users</small></h2>
@@ -2988,6 +3014,9 @@
                     <div class="clearfix"></div>
                   </div>
                   <div class="x_content">
+                      <div class="row">
+                          <div class="col-sm-12">
+                            <div class="card-box table-responsive">
                     <p class="text-muted font-13 m-b-30">
                       Responsive is an extension for DataTables that resolves that problem by optimising the table's layout for different screen sizes through the dynamic insertion and removal of columns from the table.
                     </p>
@@ -3641,6 +3670,9 @@
                   </div>
                 </div>
               </div>
+            </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>

src/scss/custom.scss

@@ -481,6 +481,7 @@
   .item{
     display:block;
   }
+
 }
 .nav-md .container.body .col-md-3.left_col {
   min-height: 100%;
@@ -538,7 +539,7 @@ body .container.body .right_col {
     font-size: 17px;
   }
   .tile, .graph {
-    zoom: 85%;
+    zoom: 76%;
     height: inherit;
   }
   .item{
@@ -1458,11 +1459,11 @@ table.jambo_table tbody tr.selected td {
   background: #ff0000;
 }
 
-// .dataTables_wrapper {
-//   position: relative;
-//   clear: both;
-//   zoom: 1;
-// }
+.dataTables_wrapper {
+  position: relative;
+  clear: both;
+  zoom: 1;
+}
 
 .dataTables_processing {
   position: absolute;
@@ -4709,6 +4710,10 @@ ul.notifications {
     right: 135px;
     top: 7px;
 }
+.tile, .graph {
+  zoom: 71%;
+  height: inherit;
+}
 }
 @media (min-width: 768px) and (max-width: 1024px){
   .info-number .badge {