*columns compatibility with bs4

build/css/custom.css

@@ -1,26 +1,117 @@
+.daterangepicker .ranges li {
+  color: #73879C; }
+  .daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
+    background: #536A7F;
+    border: 1px solid #536A7F;
+    color: #fff; }
+.daterangepicker .input-mini {
+  background-color: #eee;
+  border: 1px solid #ccc;
+  box-shadow: none !important; }
+  .daterangepicker .input-mini.active {
+    border: 1px solid #ccc; }
+.daterangepicker select.monthselect, .daterangepicker select.yearselect, .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
+  font-size: 12px;
+  padding: 1px;
+  height: auto;
+  margin: 0;
+  cursor: default;
+  height: 30px;
+  border: 1px solid #ADB2B5;
+  line-height: 30px;
+  border-radius: 0px !important; }
+.daterangepicker select.monthselect {
+  margin-right: 2%; }
+.daterangepicker td.in-range {
+  background: #E4E7EA;
+  color: #73879C; }
+.daterangepicker td.active, .daterangepicker td.active:hover {
+  background-color: #536A7F;
+  color: #fff; }
+.daterangepicker th.available:hover {
+  background: #eee;
+  color: #34495E; }
+.daterangepicker:before, .daterangepicker:after {
+  content: none; }
+.daterangepicker .calendar.single {
+  margin: 0 0 4px 0; }
+  .daterangepicker .calendar.single .calendar-table {
+    width: 224px;
+    padding: 0 0 4px 0 !important; }
+    .daterangepicker .calendar.single .calendar-table thead tr:first-child th {
+      padding: 8px 5px; }
+    .daterangepicker .calendar.single .calendar-table thead th {
+      border-radius: 0; }
+.daterangepicker.picker_1 {
+  color: #fff;
+  background: #34495E; }
+  .daterangepicker.picker_1 .calendar-table {
+    background: #34495E; }
+    .daterangepicker.picker_1 .calendar-table thead tr {
+      background: #213345; }
+    .daterangepicker.picker_1 .calendar-table thead tr:first-child {
+      background: #1ABB9C; }
+    .daterangepicker.picker_1 .calendar-table td.off {
+      background: #34495E;
+      color: #999; }
+    .daterangepicker.picker_1 .calendar-table td.available:hover {
+      color: #34495E; }
+.daterangepicker.picker_2 .calendar-table thead tr {
+  color: #1ABB9C; }
+.daterangepicker.picker_2 .calendar-table thead tr:first-child {
+  color: #73879C; }
+.daterangepicker.picker_3 .calendar-table thead tr:first-child {
+  color: #fff;
+  background: #1ABB9C; }
+.daterangepicker.picker_4 .calendar-table thead tr:first-child {
+  color: #fff;
+  background: #34495E; }
+.daterangepicker.picker_4 .calendar-table td, .daterangepicker.picker_4 .calendar-table td.off {
+  background: #ECF0F1;
+  border: 1px solid #fff;
+  border-radius: 0; }
+.daterangepicker.picker_4 .calendar-table td.active {
+  background: #34495E; }
+
+.calendar-exibit .show-calendar {
+  float: none;
+  display: block;
+  position: relative;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  margin-bottom: 20px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  overflow: hidden; }
+  .calendar-exibit .show-calendar .calendar {
+    margin: 0 0 4px 0; }
+  .calendar-exibit .show-calendar.picker_1 {
+    background: #34495E; }
+.calendar-exibit .calendar-table {
+  padding: 0 0 4px 0; }
+
 @charset "UTF-8";
 .left_col {
   background: #2A3F54; }
 
-.nav-sm .container.body .col-md-3.left_col {
+.nav-sm .container-fluid.body .col-md-3.left_col {
   min-height: 100%;
   width: 70px;
   padding: 0;
   z-index: 9999;
   position: absolute; }
 
-.nav-sm .container.body .col-md-3.left_col.menu_fixed {
+.nav-sm .container-fluid.body .col-md-3.left_col.menu_fixed {
   position: fixed;
   height: 100%; }
 
-.nav-sm .container.body .col-md-3.left_col .mCSB_container,
-.nav-sm .container.body .col-md-3.left_col .mCustomScrollBox {
+.nav-sm .container-fluid.body .col-md-3.left_col .mCSB_container,
+.nav-sm .container-fluid.body .col-md-3.left_col .mCustomScrollBox {
   overflow: visible; }
 
 .nav-sm .hidden-small {
   visibility: hidden; }
 
-.nav-sm .container.body .right_col {
+.nav-sm .container-fluid.body .right_col {
   padding: 10px 20px;
   margin-left: 70px;
   z-index: 2; }
@@ -192,18 +283,16 @@
   width: 230px;
   padding: 0;
   position: absolute;
-  display: -ms-flexbox;
-  display: flex;
   z-index: 1; }
 
-.nav-md .container.body .col-md-3.left_col.menu_fixed {
+.nav-md .container-fluid.body .col-md-3.left_col.menu_fixed {
   height: 100%;
   position: fixed; }
 
-body .container.body .right_col {
+body .container-fluid.body .right_col {
   background: #F7F7F7; }
 
-.nav-md .container.body .right_col {
+.nav-md .container-fluid.body .right_col {
   padding: 10px 20px 0;
   margin-left: 230px; }
 
@@ -215,14 +304,14 @@ body .container.body .right_col {
   height: 57px; }
 
 @media (max-width: 991px) {
-  .nav-md .container.body .right_col, .nav-md .container.body .top_nav {
+  .nav-md .container-fluid.body .right_col, .nav-md .container-fluid.body .top_nav {
     width: 100%;
     margin: 0; }
 
-  .nav-md .container.body .col-md-3.left_col {
+  .nav-md .container-fluid.body .col-md-3.left_col {
     display: none; }
 
-  .nav-md .container.body .right_col {
+  .nav-md .container-fluid.body .right_col {
     width: 100%;
     padding-right: 0; }
 
@@ -317,7 +406,7 @@ body .container.body .right_col {
   border: 1px solid #50C1CF !important;
   color: #fff; }
 
-.container {
+.container-fluid {
   width: 100%;
   padding: 0; }
 
@@ -522,7 +611,7 @@ a:hover, a:focus {
   border-left: 1px solid #425668;
   bottom: 0;
   content: "";
-  left: 27px;
+  left: 26px;
   position: absolute;
   top: 0; }
 
@@ -3895,94 +3984,3 @@ ul.notifications {
   .x_panel .dropdown-menu {
     left: initial;
     right: 0; } }
-
-.daterangepicker .ranges li {
-  color: #73879C; }
-  .daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
-    background: #536A7F;
-    border: 1px solid #536A7F;
-    color: #fff; }
-.daterangepicker .input-mini {
-  background-color: #eee;
-  border: 1px solid #ccc;
-  box-shadow: none !important; }
-  .daterangepicker .input-mini.active {
-    border: 1px solid #ccc; }
-.daterangepicker select.monthselect, .daterangepicker select.yearselect, .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
-  font-size: 12px;
-  padding: 1px;
-  height: auto;
-  margin: 0;
-  cursor: default;
-  height: 30px;
-  border: 1px solid #ADB2B5;
-  line-height: 30px;
-  border-radius: 0px !important; }
-.daterangepicker select.monthselect {
-  margin-right: 2%; }
-.daterangepicker td.in-range {
-  background: #E4E7EA;
-  color: #73879C; }
-.daterangepicker td.active, .daterangepicker td.active:hover {
-  background-color: #536A7F;
-  color: #fff; }
-.daterangepicker th.available:hover {
-  background: #eee;
-  color: #34495E; }
-.daterangepicker:before, .daterangepicker:after {
-  content: none; }
-.daterangepicker .calendar.single {
-  margin: 0 0 4px 0; }
-  .daterangepicker .calendar.single .calendar-table {
-    width: 224px;
-    padding: 0 0 4px 0 !important; }
-    .daterangepicker .calendar.single .calendar-table thead tr:first-child th {
-      padding: 8px 5px; }
-    .daterangepicker .calendar.single .calendar-table thead th {
-      border-radius: 0; }
-.daterangepicker.picker_1 {
-  color: #fff;
-  background: #34495E; }
-  .daterangepicker.picker_1 .calendar-table {
-    background: #34495E; }
-    .daterangepicker.picker_1 .calendar-table thead tr {
-      background: #213345; }
-    .daterangepicker.picker_1 .calendar-table thead tr:first-child {
-      background: #1ABB9C; }
-    .daterangepicker.picker_1 .calendar-table td.off {
-      background: #34495E;
-      color: #999; }
-    .daterangepicker.picker_1 .calendar-table td.available:hover {
-      color: #34495E; }
-.daterangepicker.picker_2 .calendar-table thead tr {
-  color: #1ABB9C; }
-.daterangepicker.picker_2 .calendar-table thead tr:first-child {
-  color: #73879C; }
-.daterangepicker.picker_3 .calendar-table thead tr:first-child {
-  color: #fff;
-  background: #1ABB9C; }
-.daterangepicker.picker_4 .calendar-table thead tr:first-child {
-  color: #fff;
-  background: #34495E; }
-.daterangepicker.picker_4 .calendar-table td, .daterangepicker.picker_4 .calendar-table td.off {
-  background: #ECF0F1;
-  border: 1px solid #fff;
-  border-radius: 0; }
-.daterangepicker.picker_4 .calendar-table td.active {
-  background: #34495E; }
-
-.calendar-exibit .show-calendar {
-  float: none;
-  display: block;
-  position: relative;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  margin-bottom: 20px;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  overflow: hidden; }
-  .calendar-exibit .show-calendar .calendar {
-    margin: 0 0 4px 0; }
-  .calendar-exibit .show-calendar.picker_1 {
-    background: #34495E; }
-.calendar-exibit .calendar-table {
-  padding: 0 0 4px 0; }

build/css/style-extra-bs4.css

@@ -1,7 +1,17 @@
 
 
-.container.test  .col.one {  background:gold; }
-.container.test  .col.two {  background:red; }
+.container-fluid.test  .col.one {  background:gold; }
+.container-fluid.test  .col.two {  background:red; }
 
-.container.body .col-md-3 { background:orange; }
+.container.body .col-md-3 {  } 
 
+
+.nav.side-menu>li { width:100%; }
+
+.nav.side-menu>li.active>a { z-index:1; }
+
+.input-group { text-align:right; }
+
+
+.title_left { background:red; }
+.title_right { background:grey; }

production/tester.html

@@ -177,6 +177,63 @@
 		
 			<!-- SIDEBAR - ends -->
 			
+			<!-- right col -->
+			
+			<div class="right_col" role="main">
+			  <div>
+				<div class="page-title">
+				  <div class="title_left">
+					<h3>Plain Page</h3>
+				  </div>
+
+				  <div class="title_right">
+					<div class="col-md-5 col-sm-5 col-xs-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">
+						  <button class="btn btn-default" type="button">Go!</button>
+						</span>
+					  </div>
+					</div>
+				  </div>
+				</div>
+
+				<div class="clearfix"></div>
+
+				<div class="row">
+				  <div class="col-md-12 col-sm-12 col-xs-12">
+					<div class="x_panel">
+					  <div class="x_title">
+						<h2>Plain Page</h2>
+						<ul class="nav navbar-right panel_toolbox">
+						  <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
+						  </li>
+						  <li class="dropdown">
+							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
+							<ul class="dropdown-menu" role="menu">
+							  <li><a href="#">Settings 1</a>
+							  </li>
+							  <li><a href="#">Settings 2</a>
+							  </li>
+							</ul>
+						  </li>
+						  <li><a class="close-link"><i class="fa fa-close"></i></a>
+						  </li>
+						</ul>
+						<div class="clearfix"></div>
+					  </div>
+					  <div class="x_content">
+						  Add content to the page ...
+					  </div>
+					</div>
+				  </div>
+				</div>
+			  </div>
+			</div>
+			
+			<!-- right col - ends -->
+			
+			
 			<div class="row">
 			
 				<div class="col one">A</div>

src/scss/custom.scss

@@ -2,25 +2,25 @@
 .left_col {
   background: #2A3F54;
 }
-.nav-sm container-fluid.body .col-md-3.left_col {
+.nav-sm .container-fluid.body .col-md-3.left_col {
   min-height: 100%;
   width: 70px;
   padding: 0;
   z-index: 9999;
   position: absolute;
 }
-.nav-sm container-fluid.body .col-md-3.left_col.menu_fixed {
+.nav-sm .container-fluid.body .col-md-3.left_col.menu_fixed {
   position: fixed;
   height: 100%;
 }
-.nav-sm container-fluid.body .col-md-3.left_col .mCSB_container,
-.nav-sm container-fluid.body .col-md-3.left_col .mCustomScrollBox {
+.nav-sm .container-fluid.body .col-md-3.left_col .mCSB_container,
+.nav-sm .container-fluid.body .col-md-3.left_col .mCustomScrollBox {
   overflow: visible;
 }
 .nav-sm .hidden-small {  
   visibility: hidden;
 }
-.nav-sm container-fluid.body .right_col {
+.nav-sm .container-fluid.body .right_col {
   padding: 10px 20px;
   margin-left: 70px;
   z-index: 2;
@@ -190,22 +190,21 @@
     position: static;
   }
 }
-.nav-md container-fluid-fluid.body .left_col {
+.nav-md .container-fluid.body .left_col {
   min-height: 100%;
   width: 230px;
   padding: 0;
   position: absolute;
-  display: flex;
   z-index: 1;
 }
-.nav-md container-fluid.body .col-md-3.left_col.menu_fixed {
+.nav-md .container-fluid.body .col-md-3.left_col.menu_fixed {
   height: 100%;
   position: fixed;
 }
-body container-fluid.body .right_col {
+body .container-fluid.body .right_col {
   background: #F7F7F7;
 }
-.nav-md container-fluid.body .right_col {
+.nav-md .container-fluid.body .right_col {
   padding: 10px 20px 0;
   margin-left: 230px;
 }
@@ -217,14 +216,14 @@ body container-fluid.body .right_col {
   height: 57px;
 }
 @media (max-width: 991px) {
-  .nav-md container-fluid.body .right_col, .nav-md container-fluid.body .top_nav {
+  .nav-md .container-fluid.body .right_col, .nav-md .container-fluid.body .top_nav {
     width: 100%;
     margin: 0;
   }
-  .nav-md container-fluid.body .col-md-3.left_col {
+  .nav-md .container-fluid.body .col-md-3.left_col {
     display: none;
   }
-  .nav-md container-fluid.body .right_col {
+  .nav-md .container-fluid.body .right_col {
     width: 100%;
     padding-right: 0
   }
@@ -326,7 +325,7 @@ body container-fluid.body .right_col {
   border: 1px solid #50C1CF !important;
   color: #fff;
 }
-container-fluid {
+.container-fluid {
   width: 100%;
   padding: 0
 }
@@ -551,7 +550,7 @@ a:hover, a:focus {
   border-left: 1px solid #425668;
   bottom: 0;
   content: "";
-  left: 27px;
+  left: 26px;
   position: absolute;
   top: 0;
 }