diff --git a/plugins/Dashboard/javascripts/dashboardObject.js b/plugins/Dashboard/javascripts/dashboardObject.js
index cd2d848253c73c646efa1c110c356f0b3774c28f..f80f485fb852c15c6ef60d7e295a8ed82108d10c 100644
--- a/plugins/Dashboard/javascripts/dashboardObject.js
+++ b/plugins/Dashboard/javascripts/dashboardObject.js
@@ -297,8 +297,49 @@
             }
         }
 
-        for (var i = 0; i < columnCount; i++) {
-            $('.col', dashboardElement)[i].className = 'col width-' + columnWidth[i];
+        switch (layout) {
+            case '100':
+                $('.col', dashboardElement).removeClass()
+                    .addClass('col col-md-12');
+                break;
+            case '50-50':
+                $('.col', dashboardElement).removeClass()
+                    .addClass('col col-md-6');
+                break;
+            case '67-33':
+                $('.col', dashboardElement)[0].className = 'col col-md-8';
+                $('.col', dashboardElement)[1].className = 'col col-md-4';
+                break;
+            case '33-67':
+                $('.col', dashboardElement)[0].className = 'col col-md-4';
+                $('.col', dashboardElement)[1].className = 'col col-md-8';
+                break;
+            case '33-33-33':
+                $('.col', dashboardElement)[0].className = 'col col-md-4';
+                $('.col', dashboardElement)[1].className = 'col col-md-4';
+                $('.col', dashboardElement)[2].className = 'col col-md-4';
+                break;
+            case '40-30-30':
+                $('.col', dashboardElement)[0].className = 'col col-md-6';
+                $('.col', dashboardElement)[1].className = 'col col-md-3';
+                $('.col', dashboardElement)[2].className = 'col col-md-3';
+                break;
+            case '30-40-30':
+                $('.col', dashboardElement)[0].className = 'col col-md-3';
+                $('.col', dashboardElement)[1].className = 'col col-md-6';
+                $('.col', dashboardElement)[2].className = 'col col-md-3';
+                break;
+            case '30-30-40':
+                $('.col', dashboardElement)[0].className = 'col col-md-3';
+                $('.col', dashboardElement)[1].className = 'col col-md-3';
+                $('.col', dashboardElement)[2].className = 'col col-md-6';
+                break;
+            case '25-25-25-25':
+                $('.col', dashboardElement)[0].className = 'col col-md-3';
+                $('.col', dashboardElement)[1].className = 'col col-md-3';
+                $('.col', dashboardElement)[2].className = 'col col-md-3';
+                $('.col', dashboardElement)[3].className = 'col col-md-3';
+                break;
         }
 
         makeWidgetsSortable();
diff --git a/plugins/Dashboard/stylesheets/dashboard.less b/plugins/Dashboard/stylesheets/dashboard.less
index 775b7da56b6c72944b49899e59c4f4a4500e3a0e..3d2b2ae32b05fec02888006ca20bb41ba053486d 100644
--- a/plugins/Dashboard/stylesheets/dashboard.less
+++ b/plugins/Dashboard/stylesheets/dashboard.less
@@ -26,57 +26,41 @@
   }
 }
 
-.col {
-  float: left;
-  min-height: 100px;
-}
-
-.col.width-100 {
-  width: 100%;
-}
-
-.col.width-75 {
-  width: 75%;
-}
-
-.col.width-67 {
-  width: 66.67%;
-}
-
-.col.width-50 {
-  width: 50%;
-}
-
-.col.width-40 {
-  width: 40%;
-}
-
-.col.width-33 {
-  width: 33.33%;
-}
+#dashboard {
+  .col {
+    min-height: 100px;
+    // Customize Bootstrap gutter between columns
+    padding-right: 7px;
+    padding-left: 7px;
 
-.col.width-30 {
-  width: 30%;
-}
+    >.sortable {
+      padding: 5px 0;
+    }
+  }
 
-.col.width-25 {
-  width: 25%;
+  .widget {
+    background: @theme-color-background-base;
+    border: 1px solid #bbb6ad;
+    border-radius: 4px;
+    overflow: hidden;
+    font-size: 14px;
+    z-index: 1;
+
+    h3 {
+      font-size: 15px;
+      margin: 0;
+      font-weight: normal;
+      color: #0D0D0D;
+      text-shadow: none;
+      padding: 15px 15px 10px;
+    }
+  }
 }
 
 .hover {
   border: 2px dashed #E3E3E3;
 }
 
-.widget {
-  background: @theme-color-background-base;
-  border: 1px solid #bbb6ad;
-  margin: 10px 7px;
-  border-radius: 4px;
-  overflow: hidden;
-  font-size: 14px;
-  z-index: 1;
-}
-
 .widgetHover {
   border: 1px solid #aba494;
 }
@@ -112,18 +96,6 @@
   padding-bottom: 4px;
 }
 
-.widgetTopHover {
-}
-
-h3.widgetName {
-  font-size: 15px;
-  padding: 0px;
-  margin: 0px;
-  font-weight: normal;
-  color: #0D0D0D;
-  text-shadow: none;
-}
-
 .widgetNameOffScreen {
   overflow: hidden;
   width:1px;
@@ -323,31 +295,24 @@ h3.widgetName {
 #columnPreview .width-100 {
   width: 120px;
 }
-
 #columnPreview .width-75 {
   width: 90px;
 }
-
 #columnPreview .width-67 {
   width: 80.4px;
 }
-
 #columnPreview .width-50 {
   width: 60px;
 }
-
 #columnPreview .width-40 {
   width: 48px;
 }
-
 #columnPreview .width-33 {
   width: 40px;
 }
-
 #columnPreview .width-30 {
   width: 36px;
 }
-
 #columnPreview .width-25 {
   width: 30px;
 }
diff --git a/plugins/Morpheus/stylesheets/theme.less b/plugins/Morpheus/stylesheets/theme.less
index 4ecc74ceb73504311c89874b55bf7a1a37ffa265..8d5205f6d4b8b1ccf6bb7278ac21a9d1a4e6b278 100644
--- a/plugins/Morpheus/stylesheets/theme.less
+++ b/plugins/Morpheus/stylesheets/theme.less
@@ -574,11 +574,9 @@ div.sparkline {
     .widgetTop {
         background: @theme-color-widget-title-background;
         border-bottom: 1px solid @color-silver-l80;
-        .widgetName {
+        h3 {
             .font-default(15px, 18px);
             color: @theme-color-widget-title-text;
-            text-shadow: none;
-            padding: 15px 15px 10px;
         }
     }