http://git-wip-us.apache.org/repos/asf/ambari/blob/2a77e39c/ambari-web/app/styles/modal_popups.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/modal_popups.less 
b/ambari-web/app/styles/modal_popups.less
index 04e7dd4..49fda07 100644
--- a/ambari-web/app/styles/modal_popups.less
+++ b/ambari-web/app/styles/modal_popups.less
@@ -17,13 +17,34 @@
  */
 @import 'common.less';
 
+
+.modal {
+  top: 5%;
+  .modal-body {
+    .top-wrap {
+      &.top-wrap-header {
+        border-bottom: 1px solid #eee;
+        margin-bottom: 20px;
+      }
+    }
+  }
+}
+.modal-body {
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.modal-header h4 {
+  margin: 0;
+}
+
 /*90% width modal window start*/
-.full-width-modal {
+.wizard-modal-wrapper {
   .modal {
     .modal-body {
-      div.error{
+      div.error {
         color: #b94a48;
-        .help-inline{
+        .help-block {
           color: #b94a48;
         }
       }
@@ -34,71 +55,9 @@
         -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
         box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
       }
-      .add-cluster-1{
-        width: 100%;
-        height : 500px;
-        margin: 0 auto;
-
-        .each-row{
-          margin-top: 10px;
-        }
-
-        .add-cluster-1-1{
-          width: 100%;
-          height : 100%;
-          float: left;
-        }
-        .add-cluster-1-3{
-          width: 45%;
-          height : 100%;
-          float: left;
-        }
-        .add-cluster-1-2{
-          width: 10%;
-          height : 100%;
-          float: left;
-
-          .add-cluster-1-2-1{
-            width: 100%;
-            height : 40%;
-          }
-          .add-cluster-1-2-2{
-            width: 100%;
-            height : 10%;
-          }
-          .add-cluster-1-2-3{
-            width: 100%;
-            height : 50%;
-          }
-          .middle-line{
-            width : 2%;
-            margin : 0 auto;
-            height : 100%;
-            background-color: #000000;
-          }
-          .add-cluster-center-most-div{
-            height : 30%;
-            text-align: center;
-            position: relative;
-            top: 30%;
-          }
-        }
-      }
-
-
-
     }
   }
 
-  .clear {
-    clear: both;
-  }
-  > div > .dataTable {
-    border: 1px solid silver;
-    th {
-      border-top: none;
-    }
-  }
   .content {
     padding: 0;
   }
@@ -117,41 +76,20 @@
 
 /*700px width modal window start*/
 .modal-690px-width {
-  .modal {
-    width: 690px;
-    margin: 0 0 0 -345px;
-    max-height: 544px;
-    top: 5%;
-  }
-
   .modal-body {
     max-height: 403px;
   }
 }
 /*700px width modal window end*/
 
-/*60% width modal window start*/
-.sixty-percent-width-modal.hideCloseLink{
-  .modal-header{
-    .close{
-      display:none
-    }
-  }
-}
-
 .manage-alert-notifications-popup {
   .modal-body {
     overflow: visible;
   }
 }
 
-.sixty-percent-width-modal-edit-widget {
-  .modal {
-    width: 60%;
-    margin: 0 0 0 -30%;
-    max-height: 544px;
-    top: 5%;
-  }
+/*60% width modal window start*/
+.modal-edit-widget {
   .modal-header{
     min-width: 650px;
   }
@@ -171,7 +109,7 @@
       max-width: 630px;
       max-height: 15px;
     }
-    #min-height-limit .span9{
+    #min-height-limit .col-md-9{
       min-height: 15px;
     }
     #min-height-limit .progress{
@@ -211,9 +149,9 @@
     #slider-value4{
       max-width: 65px;
     }
-    .slider-error{
+    .slider-error {
       color: #b94a48;
-      .help-inline{
+      .help-block {
         color: #b94a48;
       }
     }
@@ -225,45 +163,19 @@
     }
   }
 }
-.sixty-percent-width-modal {
-
-  .modal {
-    width: 60%;
-    margin: 0 0 0 -30%;
-    max-height: 563px;
-    min-width: 590px;
-    top: 5%;
-  }
 
-  &.modal-full-width {
-    .modal {
-      width: 90%;
-      margin: 0 0 0 -45%;
-      max-height: 90%;
-    }
-  }
+.common-modal-wrapper {
 
-  .long-popup-list {
-    height: 280px;
-    overflow: auto;
-    width: 100%;
-  }
   .modal-footer {
     #footer-checkbox {
       text-align: left;
       padding-top: 3px;
       margin-left: 22px;
-      float: left;
-      .checkbox {
-        margin: 0;
-      }
     }
   }
 
   .modal-body {
 
-    max-height: 403px;
-
     li.disabled {
       a {
         cursor: not-allowed;
@@ -272,168 +184,6 @@
 
     .form-horizontal{
 
-
-      .add-cluster-1{
-        width: 100%;
-        height : auto;
-        min-height : 350px;
-        margin: 0 auto;
-
-        .each-row{
-          margin-top: 10px;
-        }
-
-        .add-cluster-1-1{
-          width: 100%;
-          height : 100%;
-          float: left;
-          div.error{
-            color: #b94a48;
-            .help-inline{
-              color: #b94a48;
-            }
-          }
-
-          div.error input{
-            border-color: #b94a48;
-            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-            -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-          }
-        }
-        .add-cluster-1-3{
-          width: 45%;
-          height : 100%;
-          float: right;
-        }
-        .add-cluster-1-2{
-          width: 10%;
-          height : 100%;
-          float: left;
-
-          .add-cluster-1-2-1{
-            width: 100%;
-            height : 40%;
-          }
-          .add-cluster-1-2-2{
-            width: 100%;
-            height : 10%;
-          }
-          .add-cluster-1-2-3{
-            width: 100%;
-            height : 50%;
-          }
-          .middle-line{
-            width : 2%;
-            margin : 0 auto;
-            height : 100%;
-            background-color: #000000;
-          }
-          .add-cluster-center-most-div{
-            height : 30%;
-            text-align: center;
-            position: relative;
-            top: 30%;
-          }
-        }
-      }
-
-      .add-cluster-2{
-        margin : 0 auto;
-        height : auto;
-        min-height : 350px;
-        table{
-          width : 60%;
-          margin : 0 20%;
-
-          .spacer{
-            height: 20px;
-          }
-
-          tr.error{
-            color: #b94a48;
-            .help-inline{
-              color: #b94a48;
-            }
-
-            input{
-              border-color: #b94a48;
-              -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-              -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-              box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-            }
-          }
-
-          td {
-            width : 50%;
-            a.btn-success{
-              margin-left: 30%;
-            }
-          }
-
-        }
-
-      }
-
-
-      .add-data-set{
-        width: 80%;
-        margin: 0 auto;
-        table{
-          width: 100%;
-        }
-        tr.error{
-          color: #b94a48;
-          .help-inline{
-            color: #b94a48;
-          }
-        }
-
-        div.error{
-          color: #b94a48;
-          .help-inline{
-            color: #b94a48;
-          }
-        }
-
-        div.error input{
-          border-color: #b94a48;
-          -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-          -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-        }
-
-        td.percent25 {
-          width: 25%;
-        }
-        td.spacer{
-          height: 10px;
-        }
-        td{
-          .btn-group{
-            display : inline;
-            span.caret{
-              float : right;
-            }
-            ul.dropdown-menu{
-              margin-top:15px;
-            }
-          }
-          .ember-view{
-            display : inline;
-          }
-
-        }
-
-        input.hyper-mini{
-          width: 20px;
-        }
-
-        .targetClusterDD{
-          min-width : 170px;
-        }
-
-      }
       .each-row{
         margin-top: 10px;
       }
@@ -442,7 +192,7 @@
         clear:both;
       }
       .override-controls{
-        .icon-ok-sign {
+        .glyphicon-ok-sign {
           color: #5AB400;
         }
         #filter-dropdown-div {
@@ -459,7 +209,7 @@
             left: auto;
           }
         }
-        .input-append{
+        .input-group{
           input{
             -webkit-border-radius: 4px 0 0 4px;
             -moz-border-radius: 4px 0 0 4px;
@@ -480,7 +230,6 @@
           height: 225px;
           max-height: 225px;
           overflow: auto;
-          border: 1px solid #eee;
         }
         table{
           th {
@@ -492,24 +241,12 @@
           color: #777;
         }
       }
-      .control-label{
+      .control-label:not(class=["col-md*"]) {
         width:auto;
       }
-      .overrideSelectBox {
-        width:100%;
-      }
     }
   }
 
-  .clear {
-    clear: both;
-  }
-  > div > .dataTable {
-    border: 1px solid silver;
-    th {
-      border-top: none;
-    }
-  }
   .content {
     padding: 0;
   }
@@ -534,7 +271,6 @@
   @modal-padding: 40px;
 
   .modal {
-    max-height: 90%;
 
     &.no-footer {
       .modal-body {
@@ -562,17 +298,6 @@
   }
 }
 
-.modal {
-  .modal-body {
-    .top-wrap {
-      &.top-wrap-header {
-        border-bottom: 1px solid #eee;
-        margin-bottom: 20px;
-      }
-    }
-  }
-}
-
 
 .host-progress-popup {
   .task-detail-info {
@@ -625,10 +350,19 @@
       #infinite-scroll-append {
         text-align: center;
 
-        .icon-spinner {
+        .glyphicon glyphicon-spinner {
           font-size: 24px;
         }
       }
     }
   }
 }
+
+.modal-xlg {
+  width: 1280px;
+  .wizard {
+    .container {
+      width: 1236px;
+    }
+  }
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/2a77e39c/ambari-web/app/styles/stack_versions.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/stack_versions.less 
b/ambari-web/app/styles/stack_versions.less
index b902653..3eebe82 100644
--- a/ambari-web/app/styles/stack_versions.less
+++ b/ambari-web/app/styles/stack_versions.less
@@ -18,13 +18,13 @@
 @import 'common.less';
 
 #advancedRepoAccordion{
-  .accordion-heading {
+  .panel-heading {
     background-color: #f0f0f0;
     a:hover {
       text-decoration: none;
     }
   }
-  .accordion-body {
+  .panel-body {
     .repositories-table {
       overflow: auto;
       margin-bottom: 10px;
@@ -82,12 +82,12 @@
                 text-decoration: none;
                 &.disabled-clear-button {
                   cursor: default;
-                  .icon-remove-sign {
+                  .glyphicon-remove-sign {
                     cursor: default;
                   }
                 }
               }
-              .icon-remove-sign {
+              .glyphicon-remove-sign {
                 color: #808080;
               }
             }
@@ -126,16 +126,16 @@
 }
 .version-box-popup {
   .modal{
-    max-height: 563px;
-    max-width: 340px;
-    margin: -250px 0 0 -180px;
+    .modal-dialog{
+      width: 340px;
+    }
     .modal-body {
-      padding: 0px 0px;
+      padding: 0;
     }
   }
   .version-box-in-popup.version-box {
-    padding: 0px 0px;
-    margin: 0px 0px;
+    padding: 0;
+    margin: 0;
     border: none;
     .hosts-section {
       padding-bottom: 16px;
@@ -148,15 +148,15 @@
   .versions-slides {
     overflow-x: auto;
     padding-bottom: 25px;
-    margin-left: 0;
-    margin-top: 5px;
+    padding-left: 0;
+    margin-top: 10px;
     .versions-slides-bar {
       display: inline-flex;
     }
   }
   .left-menu-table {
     padding: 10px 0;
-    margin-top: 124px;
+    margin-top: 122px;
     td.service-display-name {
       border-top: 2px solid #e4e4e4;
       border-bottom: 2px solid #e4e4e4;
@@ -263,6 +263,7 @@
       font-weight: 500;
     }
     .hosts-section .host-link {
+      margin: 0;
       font-size: 12px;
     }
   }
@@ -304,8 +305,7 @@
       }
     }
     .state.installing {
-      padding-bottom: 5px;
-      margin: 10px 0px;
+      margin: 5px 0 15px 0;
     }
     .services-section {
       width: 100%;
@@ -343,84 +343,24 @@
         }
       }
     }
-
-
-  }
-}
-
-#stack-upgrade-dialog {
-  .details-box {
-    padding: 5px;
-    margin-left: 15px;
-    margin-right: 95px;
-    .button-row {
-      text-align: right;
-      padding: 5px;
-    }
-    input[type="checkbox"] {
-      margin: 0;
-    }
-    .message {
-      line-height: 30px;
-    }
-  }
-  .task-details {
-    .manage-controls a {
-      cursor: pointer;
-      margin-right: 12px;
-    }
-    textarea {
-      width: 100%;
-      min-height: 100px;
-      box-sizing: border-box;
-    }
-  }
-  .task-list {
-    overflow-x: hidden;
-    .progress {
-      margin-bottom: 0;
-    }
-    padding-left: 20px;
-    i {
-      margin-right: 5px;
-    }
-  }
-  .task-list-main-warp i {
-    font-size: 16px;
   }
-  ul.failed-info-list {
-    max-height: 500px;
-    margin-top: 5px;
-  }
-  .upgrade-options-link {
-    position: absolute;
-    cursor: pointer;
-    right: 10%;
-    top: 13px;
-    width: 100px;
-    a {
-      font-size: 13px;
-    }
-    .icon-cogs {
-      color: #0088cc;
-      margin-right: 3px;
-    }
-  }
-  .upgrade-options-link.disabled {
-    cursor: not-allowed;
-    a, .icon-cogs {
-      color: #808080;
-    }
-    a:hover {
-      text-decoration: none;
-    }
+  .nav.nav-tabs {
+    margin-bottom: 20px;
   }
 }
 
+#stack-upgrade-dialog,
 #stack-upgrade-record-dialog {
+  .row {
+    margin: 0;
+    padding: 5px 0;
+  }
+  .upgrade-item-text,
+  .upgrade-group-text {
+    padding-left: 0;
+  }
   .details-box {
     padding: 5px;
-    margin-left: 15px;
     margin-right: 95px;
     .button-row {
       text-align: right;
@@ -449,7 +389,7 @@
     .progress {
       margin-bottom: 0;
     }
-    padding-left: 20px;
+    padding-left: 15px;
     i {
       margin-right: 5px;
     }
@@ -470,14 +410,14 @@
     a {
       font-size: 13px;
     }
-    .icon-cogs {
+    .glyphicon-cogs {
       color: #0088cc;
       margin-right: 3px;
     }
   }
   .upgrade-options-link.disabled {
     cursor: not-allowed;
-    a, .icon-cogs {
+    a, .glyphicon-cogs {
       color: #808080;
     }
     a:hover {
@@ -502,10 +442,8 @@
 #upgrade-options-popup-content {
   .method-options {
     margin: 10px;
-    .method-option {
-      width: 43.5%;
-    }
-    .thumbnail {
+
+    .img-thumbnail {
 
       cursor: pointer;
       border: none;
@@ -549,16 +487,16 @@
       background-color: #cbe3c2;
     }
 
-    .thumbnail.not-allowed:hover {
+    .img-thumbnail.not-allowed:hover {
       background-color: #e4e4e4;
     }
-    .thumbnail.not-allowed {
+    .img-thumbnail.not-allowed {
       cursor: not-allowed;
     }
   }
 
   .method-options.disabled {
-    .thumbnail {
+    .img-thumbnail {
       cursor: not-allowed;
       .method-name,.method-icon,.method-description {
         color: #a9a9a9;
@@ -599,19 +537,19 @@
     }
   }
   .method-precheck-message.GREEN {
-    .icon-ok {
+    .glyphicon-ok {
       color: @health-status-green;
       font-size: 16px;
     }
   }
   .method-precheck-message.RED {
-    .icon-remove {
+    .glyphicon-remove {
       color: #cf2a27;
       font-size: 16px;
     }
   }
   .method-precheck-message.ORANGE {
-    .icon-warning-sign {
+    .glyphicon-warning-sign {
       color: @health-status-orange;
       font-size: 16px;
     }
@@ -625,7 +563,7 @@
   .text {
     margin-left: 10px;
   }
-  .icon-question-sign {
+  .glyphicon-question-sign {
     color: @blue;
   }
 }
@@ -706,7 +644,7 @@
               cursor: pointer;
               text-decoration: none;
             }
-            .icon-remove-sign {
+            .glyphicon-remove-sign {
               color: #808080;
             }
           }
@@ -742,21 +680,27 @@
 
 #skip-validation,
 #use-redhat {
-  .icon-question-sign {
+  .glyphicon-question-sign {
     color: @blue;
   }
 }
 
+.upgrade-wizard-modal {
+  .modal-body {
+    position: static;
+  }
+}
+
 #upgrade-failed-hosts {
   .host-list-container {
     overflow-y: auto;
     max-height: 320px;
     margin-right: -15px;
-    .accordion {
+    .panel {
       margin-bottom: 0;
-      .accordion-group {
+      .panel-group {
         border: none;
-        .accordion-toggle {
+        .panel-toggle {
           line-height: 20px;
           padding: 5px 0;
           .label {
@@ -766,10 +710,4 @@
       }
     }
   }
-  .sub-header {
-    padding: 0 15px;
-    width: 530px;
-    margin-left: -15px;
-    border-bottom: 1px solid #eee;
-  }
 }

http://git-wip-us.apache.org/repos/asf/ambari/blob/2a77e39c/ambari-web/app/styles/theme/bootstrap-ambari.css
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/theme/bootstrap-ambari.css 
b/ambari-web/app/styles/theme/bootstrap-ambari.css
new file mode 100644
index 0000000..dc57b22
--- /dev/null
+++ b/ambari-web/app/styles/theme/bootstrap-ambari.css
@@ -0,0 +1,541 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@font-face {
+  font-family: 'Roboto';
+  font-weight: normal;
+  font-style: normal;
+  src: url('fonts/Roboto-Regular-webfont.eot');
+  src: url('fonts/Roboto-Regular-webfont.eot?#iefix') 
format('embedded-opentype'), url('fonts/Roboto-Regular-webfont.woff') 
format('woff'), url('fonts/Roboto-Regular-webfont.ttf') format('truetype'), 
url('fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
+}
+.font-mixin {
+  font-family: 'Roboto', sans-serif;
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  color: #333;
+}
+.btn,
+.btn:focus {
+  outline: none;
+  font-family: 'Roboto', sans-serif;
+  text-transform: uppercase;
+  height: 34px;
+  font-size: 14px;
+  padding: 10px 20px;
+  line-height: 14px;
+}
+.btn .glyphicon,
+.btn:focus .glyphicon {
+  top: -1px;
+  float: left;
+}
+.box-shadow {
+  box-shadow: 0 0 2px 0 #1391c1;
+}
+.btn-disabled {
+  opacity: 0.6;
+  box-shadow: none;
+}
+.btn-default-disabled {
+  opacity: 0.6;
+  box-shadow: none;
+  color: #FFF;
+  background-color: #808793;
+  border: none;
+}
+.btn-default,
+.btn-default:focus {
+  color: #666;
+  background-color: #FFF;
+  border: 1px solid #CFD3D7;
+}
+.btn-default:hover,
+.btn-default:focus:hover {
+  color: #FFF;
+  background-color: #808793;
+}
+.btn-default:active,
+.btn-default:focus:active {
+  color: #666;
+  background-color: #FFF;
+  border: 1px solid #CFD3D7;
+  box-shadow: 0 0 2px 0 #1391c1;
+}
+.btn-default[disabled],
+.btn-default:focus[disabled],
+.btn-default.disabled,
+.btn-default:focus.disabled {
+  opacity: 0.6;
+  box-shadow: none;
+  color: #FFF;
+  background-color: #808793;
+  border: none;
+}
+.btn-default[disabled]:active,
+.btn-default:focus[disabled]:active,
+.btn-default.disabled:active,
+.btn-default:focus.disabled:active,
+.btn-default[disabled].active,
+.btn-default:focus[disabled].active,
+.btn-default.disabled.active,
+.btn-default:focus.disabled.active,
+.btn-default[disabled]:hover,
+.btn-default:focus[disabled]:hover,
+.btn-default.disabled:hover,
+.btn-default:focus.disabled:hover {
+  opacity: 0.6;
+  box-shadow: none;
+  color: #FFF;
+  background-color: #808793;
+  border: none;
+}
+.btn-primary-disabled {
+  opacity: 0.6;
+  box-shadow: none;
+  color: #D1E8D1;
+  background-color: #3FAE2A;
+  border: 1px solid #3FAE2A;
+}
+.btn-primary,
+.btn-primary:focus {
+  color: #FFF;
+  background-color: #3FAE2A;
+  border: 1px solid #3FAE2A;
+}
+.btn-primary:hover,
+.btn-primary:focus:hover {
+  color: #FFF;
+  background-color: #429929;
+  border: 1px solid #429929;
+}
+.btn-primary:active,
+.btn-primary:focus:active,
+.btn-primary.active,
+.btn-primary:focus.active {
+  color: #FFF;
+  background-color: #3FAE2A;
+  border: 1px solid #3FAE2A;
+  box-shadow: 0 0 2px 0 #1391c1;
+}
+.btn-primary[disabled],
+.btn-primary:focus[disabled],
+.btn-primary.disabled,
+.btn-primary:focus.disabled {
+  opacity: 0.6;
+  box-shadow: none;
+  color: #D1E8D1;
+  background-color: #3FAE2A;
+  border: 1px solid #3FAE2A;
+}
+.btn-primary[disabled]:active,
+.btn-primary:focus[disabled]:active,
+.btn-primary.disabled:active,
+.btn-primary:focus.disabled:active,
+.btn-primary[disabled].active,
+.btn-primary:focus[disabled].active,
+.btn-primary.disabled.active,
+.btn-primary:focus.disabled.active,
+.btn-primary[disabled]:hover,
+.btn-primary:focus[disabled]:hover,
+.btn-primary.disabled:hover,
+.btn-primary:focus.disabled:hover {
+  opacity: 0.6;
+  box-shadow: none;
+  color: #D1E8D1;
+  background-color: #3FAE2A;
+  border: 1px solid #3FAE2A;
+}
+.btn-secondary-disabled {
+  opacity: 0.6;
+  box-shadow: none;
+  color: #D1E8D1;
+  background-color: #429929;
+  border: 1px solid #3FAE2A;
+}
+.btn-secondary,
+.btn-secondary:focus {
+  color: #429929;
+  background-color: #FFF;
+  border: 1px solid #3FAE2A;
+}
+.btn-secondary:hover,
+.btn-secondary:focus:hover {
+  color: #FFF;
+  background-color: #429929;
+}
+.btn-secondary:active,
+.btn-secondary:focus:active {
+  color: #429929;
+  background-color: #FFF;
+  box-shadow: 0 0 2px 0 #1391c1;
+}
+.btn-secondary[disabled],
+.btn-secondary:focus[disabled],
+.btn-secondary.disabled,
+.btn-secondary:focus.disabled {
+  opacity: 0.6;
+  box-shadow: none;
+  color: #D1E8D1;
+  background-color: #429929;
+  border: 1px solid #3FAE2A;
+}
+.btn-secondary[disabled]:active,
+.btn-secondary:focus[disabled]:active,
+.btn-secondary.disabled:active,
+.btn-secondary:focus.disabled:active,
+.btn-secondary[disabled].active,
+.btn-secondary:focus[disabled].active,
+.btn-secondary.disabled.active,
+.btn-secondary:focus.disabled.active,
+.btn-secondary[disabled]:hover,
+.btn-secondary:focus[disabled]:hover,
+.btn-secondary.disabled:hover,
+.btn-secondary:focus.disabled:hover {
+  opacity: 0.6;
+  box-shadow: none;
+  color: #D1E8D1;
+  background-color: #429929;
+  border: 1px solid #3FAE2A;
+}
+.btn-regular-default-state {
+  background-color: #FFF;
+  color: #666;
+  border: 1px solid #cfd3d7;
+}
+.btn-primary-default-state {
+  background-color: #3FAE2A;
+  border: 1px solid #3FAE2A;
+  color: #FFF;
+}
+.btn-group.open .btn.dropdown-toggle {
+  box-shadow: inset 0px 0px 3px 0px #1391c1;
+}
+.btn-group.open .btn.dropdown-toggle,
+.btn-group.open .btn.dropdown-toggle.btn-default {
+  background-color: #FFF;
+  color: #666;
+  border: 1px solid #cfd3d7;
+}
+.btn-group.open .btn.dropdown-toggle:hover,
+.btn-group.open .btn.dropdown-toggle.btn-default:hover {
+  background-color: #FFF;
+  color: #666;
+  border: 1px solid #cfd3d7;
+}
+.btn-group.open .btn.dropdown-toggle + .dropdown-menu > li > a:hover,
+.btn-group.open .btn.dropdown-toggle.btn-default + .dropdown-menu > li > 
a:hover {
+  background-color: #808793;
+  color: #FFF;
+}
+.btn-group.open .btn.dropdown-toggle.btn-primary {
+  background-color: #3FAE2A;
+  border: 1px solid #3FAE2A;
+  color: #FFF;
+}
+.btn-group.open .btn.dropdown-toggle.btn-primary:hover {
+  background-color: #3FAE2A;
+  border: 1px solid #3FAE2A;
+  color: #FFF;
+}
+.btn-group.open .btn.dropdown-toggle.btn-primary + .dropdown-menu > li > 
a:hover {
+  background-color: #429929;
+  color: #FFF;
+}
+.btn-group.open .dropdown-menu {
+  font-family: 'Roboto', sans-serif;
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  color: #333;
+  border-radius: 2px;
+  font-size: 14px;
+  min-width: 200px;
+  background: #FFF;
+  color: #666;
+  border: 1px solid #cfd3d7;
+}
+.btn-group.open .dropdown-menu > li {
+  margin-bottom: 1px;
+}
+.btn-group.open .dropdown-menu > li > a {
+  height: 24px;
+}
+.btn-group .btn.dropdown-toggle:first-child {
+  min-width: 80px;
+}
+.btn-group .btn.dropdown-toggle.disabled,
+.btn-group .btn.dropdown-toggle[disabled] {
+  opacity: 0.6;
+}
+input.form-control {
+  font-size: 14px;
+  border-radius: 2px;
+  color: #666;
+  border: 1px solid #CFD3D7;
+  height: 34px;
+  padding: 10px;
+}
+input.form-control:focus {
+  border-color: #1291c1;
+  box-shadow: none;
+}
+.help-block {
+  color: #999999;
+  font-size: 14px;
+}
+.help-block.validation-block {
+  color: #999999;
+  margin-top: 10px;
+}
+.help-block.validation-block::before {
+  position: relative;
+  top: 2px;
+  margin-right: 5px;
+  font-family: 'Glyphicons Halflings';
+}
+.has-success input.form-control {
+  color: #666;
+  border: 1px solid #1EB475;
+}
+.has-success input.form-control:focus {
+  border-color: #1EB475;
+  box-shadow: none;
+}
+.has-success .help-block.validation-block::before {
+  content: '\e084';
+  color: #1EB475;
+}
+.has-error input.form-control {
+  color: #666;
+  border: 1px solid #EF6162;
+}
+.has-error input.form-control:focus {
+  border-color: #EF6162;
+  box-shadow: none;
+}
+.has-error .help-block.validation-block::before {
+  content: '\e083';
+  color: #EF6162;
+}
+.has-warning input.form-control {
+  color: #666;
+  border: 1px solid #E98A41;
+}
+.has-warning input.form-control:focus {
+  border-color: #E98A41;
+  box-shadow: none;
+}
+.has-warning .help-block.validation-block::before {
+  content: '\e101';
+  color: #E98A41;
+}
+.form-control[disabled],
+.form-control[readonly],
+fieldset[disabled] .form-control {
+  color: #dbdee2;
+  border-color: #b2b8c1;
+  background-color: #b2b8c1;
+}
+h2.table-title {
+  font-family: 'Roboto', sans-serif;
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  color: #333;
+  margin-top: 10px;
+  font-size: 20px;
+}
+.table {
+  color: #666;
+  font-size: 13px;
+}
+.table thead,
+.table tfoot {
+  color: #999;
+}
+.table input[type="checkbox"] {
+  margin-top: 0;
+}
+.table tfoot > tr:first-of-type > td {
+  border-top-width: 2px;
+}
+.table tfoot .pagination-block .pagination-block-item {
+  float: left;
+  padding: 0 5px;
+}
+.table.table-hover {
+  border-collapse: separate;
+}
+.table.table-hover .action {
+  visibility: hidden;
+  padding: 0;
+  line-height: 1;
+}
+.table.table-hover .action:hover {
+  text-decoration: none;
+}
+.table.table-hover > tbody > tr:first-of-type > td {
+  border-top-color: transparent;
+}
+.table.table-hover > tbody > tr:hover > td {
+  border-top-color: #A7DFF2;
+}
+.table.table-hover > tbody > tr > td {
+  border-width: 1px 0 1px;
+  border-style: solid;
+  border-color: #DDD transparent transparent;
+  line-height: 1;
+}
+.table.table-hover > tbody > tr > td:first-of-type {
+  border-left-width: 1px;
+}
+.table.table-hover > tbody > tr > td:last-of-type {
+  border-right-width: 1px;
+}
+.table.table-hover > tbody > tr:hover {
+  background-color: #E7F6FC;
+}
+.table.table-hover > tbody > tr:hover > td {
+  background-color: #E7F6FC;
+  border-color: #A7DFF2 transparent;
+}
+.table.table-hover > tbody > tr:hover > td:first-of-type {
+  border-left-color: #A7DFF2;
+}
+.table.table-hover > tbody > tr:hover > td:last-of-type {
+  border-right-color: #A7DFF2;
+}
+.table.table-hover > tbody > tr:hover + tr > td {
+  border-top-color: transparent;
+}
+.table.table-hover > tbody > tr:hover > td .action {
+  visibility: visible;
+}
+.table.table-hover > tbody > tr.active {
+  background-color: #EEE;
+}
+.table.table-hover > tbody > tr.active > td {
+  background-color: #EEE;
+  border-color: transparent transparent;
+}
+.table.table-hover > tbody > tr.active > td:first-of-type {
+  border-left-color: transparent;
+}
+.table.table-hover > tbody > tr.active > td:last-of-type {
+  border-right-color: transparent;
+}
+.table.table-hover > tbody > tr.active + tr > td {
+  border-top-color: transparent;
+}
+.table.table-hover > tbody > tr.active + tr:hover > td {
+  border-top-color: #A7DFF2;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  font-family: 'Roboto', sans-serif;
+}
+h1,
+.h1 {
+  font-size: 24px;
+}
+h2,
+.h2 {
+  font-size: 18px;
+}
+body,
+.body {
+  font-family: 'Roboto', sans-serif;
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  color: #333;
+  font-size: 14px;
+}
+.description {
+  font-family: 'Roboto', sans-serif;
+  font-size: 12px;
+  color: #000;
+}
+.nav.nav-tabs {
+  border: none;
+}
+.nav.nav-tabs li a {
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: #666;
+  text-transform: uppercase;
+}
+.nav.nav-tabs li a:hover,
+.nav.nav-tabs li a:active,
+.nav.nav-tabs li a:focus {
+  color: #333;
+  border: none;
+  background: none;
+}
+.nav.nav-tabs li a .badge.badge-important {
+  display: inline;
+}
+.nav.nav-tabs li.active a {
+  color: #333;
+  border-bottom: 2px solid #3FAE2A;
+}
+a,
+a:visited,
+a:focus {
+  color: #1491C1;
+  text-decoration: none;
+}
+a:hover,
+a:visited:hover,
+a:focus:hover {
+  text-decoration: underline;
+}
+a:active,
+a:visited:active,
+a:focus:active {
+  text-decoration: none;
+}
+a[disabled],
+a:visited[disabled],
+a:focus[disabled],
+a.disabled,
+a:visited.disabled,
+a:focus.disabled {
+  cursor: not-allowed;
+  color: #666;
+  text-decoration: none;
+}
+a[disabled]:hover,
+a:visited[disabled]:hover,
+a:focus[disabled]:hover,
+a.disabled:hover,
+a:visited.disabled:hover,
+a:focus.disabled:hover {
+  text-decoration: none;
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/2a77e39c/ambari-web/app/styles/widgets.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/widgets.less 
b/ambari-web/app/styles/widgets.less
index 263736d..9e67a26 100644
--- a/ambari-web/app/styles/widgets.less
+++ b/ambari-web/app/styles/widgets.less
@@ -58,7 +58,7 @@
     &.text-success {
       color: @green;
     }
-    .icon-warning-sign {
+    .glyphicon-warning-sign {
       &.warning {
         color: @health-status-yellow
       }
@@ -80,7 +80,7 @@
       .label-current {
         padding: 2px 3px 3px 5px;
       }
-      .icon-lock {
+      .glyphicon-lock {
         position: relative;
         top: 2px;
         left: 2px;
@@ -108,7 +108,7 @@
       &.active {
         color: @widget-config-override-action-active-color;
       }
-      &.text-error {
+      &.text-danger {
         color: #b94a48;
       }
     }
@@ -121,9 +121,9 @@
   }
   &.slider-widget {
     width: 100%;
-    margin-left: -20px;
+  //  margin-left: -20px;
     margin-right: 0;
-    padding-left: 20px;
+  //  padding-left: 20px;
   }
   // background hack instead of increasing padding,
   // because we have lack of space for widget container.
@@ -325,12 +325,12 @@
     line-height: normal;
     float: left;
 
-    .input-append.input-prepend {
+    .input-group {
        margin: 0;
     }
 
     input {
-      width: 20px;
+      width: 30px;
       font-size: 12px;
       text-align: center;
     }
@@ -414,7 +414,7 @@
 }
 
 .combo-widget {
-  .input-append {
+  .input-group {
     .btn-group {
       display: inline-block;
       margin-left: -1px;
@@ -463,15 +463,11 @@
       padding: 0;
       color: @green;
       &:focus {
-        border-color: none;
+        border-color: transparent;
         box-shadow: 0;
         outline: 0 none;
       }
     }
-
-    .icon-check-empty {
-      margin-left: -3px;
-    }
   }
 }
 
@@ -490,7 +486,7 @@
   }
 }
 
-.label-current.icon-ok {
+.label-current.glyphicon-ok {
   color: white;
 }
 
@@ -498,3 +494,7 @@
   background-color: rgba(211, 237, 247, 0.39);
   padding: 10px 5px 0 10px;
 }
+
+.input-group-btn {
+  width: auto;
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/2a77e39c/ambari-web/app/templates/application.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/application.hbs 
b/ambari-web/app/templates/application.hbs
index 05c4122..669daa7 100644
--- a/ambari-web/app/templates/application.hbs
+++ b/ambari-web/app/templates/application.hbs
@@ -16,151 +16,140 @@
 * limitations under the License.
 }}
 
-<div id="main">
-  {{#if App.enableDigitalClock}}
-    {{view App.ClockView}}
-  {{/if}}
+{{#if App.enableDigitalClock}}
+  {{view App.ClockView}}
+{{/if}}
 
 <div id="main">
   <div id="top-nav">
-    <div class="navbar navbar-static-top">
-      <div class="navbar-inner">
-        <div class="container main-container">
+    <nav class="navbar navbar-default navbar-static-top">
+      <div class="container main-container">
+        <p class="navbar-text brand-wrapper">
           {{#if enableLinks}}
-            <a {{translateAttr href="topnav.logo.href"}} class="logo"><img 
src="/img/logo-white.png" alt="Apache Ambari"
-                                                                           
title="Apache Ambari"></a>
-            <a class="brand" {{translateAttr href="topnav.logo.href"}} 
title="Apache Ambari">{{t app.name}}</a>
-            <a class="brand cluster-name" href="javascript:void(null);" 
{{bindAttr title="clusterName"}}>
+            <a {{translateAttr href="topnav.logo.href"}} class="logo">
+              <img src="/img/logo-white.png" alt="Apache Ambari" title="Apache 
Ambari">
+            </a>
+            <a {{translateAttr href="topnav.logo.href"}} title="Apache 
Ambari">{{t app.name}}</a>
+            {{! cluster name }}
+            <a href="#" {{bindAttr title="clusterName"}} {{action "showPopup" 
target="App.router.backgroundOperationsController"}} class="cluster-name">
               {{#unless App.isClusterUser}}
-                <span {{action "showPopup" 
target="App.router.backgroundOperationsController"}} >{{clusterDisplayName}} 
</span>
-                {{#with App.router.backgroundOperationsController}}
-                  {{#if allOperationsCount}}
-                    <i class="icon-caret-left ops-count"></i><span 
id="span-bg-operation-count"
-                                                                   
class="label operations-count" {{action "showPopup" 
target="App.router.backgroundOperationsController"}}>
-                      {{allOperationsCount}} {{pluralize allOperationsCount 
singular="t:op" plural="t:ops"}}</span>
-                  {{else}}
-                    <i class="icon-caret-left"></i><span 
id="span-bg-operation-count"
-                                                         class="label" 
{{action "showPopup" target="App.router.backgroundOperationsController"}}>
-                      {{allOperationsCount}} {{pluralize allOperationsCount 
singular="t:op" plural="t:ops"}}</span>
-                  {{/if}}
-                {{/with}}
+                <span>{{clusterDisplayName}} </span>
               {{/unless}}
+            </a>
+            {{! cluster name end }}
+            {{! bg label }}
+            <a href="#" class="bg-label" {{action "showPopup" 
target="App.router.backgroundOperationsController"}}>
+              {{#with App.router.backgroundOperationsController}}
+                <i {{bindAttr class="allOperationsCount:ops-count 
:icon-caret-left"}}></i><span id="span-bg-operation-count" {{bindAttr 
class="allOperationsCount:operations-count :label"}}>
+                  {{allOperationsCount}} {{pluralize allOperationsCount 
singular="t:op" plural="t:ops"}}
+                </span>
+              {{/with}}
+            </a>
+            {{! bg label end }}
+            {{! alerts label }}
             {{#if App.router.clusterController.isAlertsLoaded}}
-              {{#if 
App.router.mainAlertDefinitionsController.unhealthyAlertInstancesCount}}
-                <span {{bindAttr class=":label 
App.router.mainAlertDefinitionsController.isCriticalAlerts:alert-crit-count:alert-warn-count"}}
 {{action "showPopup" target="App.router.mainAlertInstancesController"}}>
-                
{{App.router.mainAlertDefinitionsController.unhealthyAlertInstancesCount}} 
{{pluralize 
App.router.mainAlertDefinitionsController.unhealthyAlertInstancesCount 
singular="alert" plural="alerts"}}</span>
-              {{else}}
-                <span {{translateAttr title="titlebar.alerts.noAlerts"}}
-                      class="label alerts-none-count" {{action "showPopup" 
target="App.router.mainAlertInstancesController"}}>
-                
{{App.router.mainAlertDefinitionsController.unhealthyAlertInstancesCount}} 
{{pluralize 
App.router.mainAlertDefinitionsController.unhealthyAlertInstancesCount 
singular="alert" plural="alerts"}}</span>
-              {{/if}}
+              <a href="#" class="alerts-label" {{action "showPopup" 
target="App.router.mainAlertInstancesController"}}>
+                {{#if 
App.router.mainAlertDefinitionsController.unhealthyAlertInstancesCount}}
+                {{! alerts exist }}
+                  <span {{bindAttr class=":label 
App.router.mainAlertDefinitionsController.isCriticalAlerts:alert-crit-count:alert-warn-count"}}>
+                    
{{App.router.mainAlertDefinitionsController.unhealthyAlertInstancesCount}} 
{{pluralize 
App.router.mainAlertDefinitionsController.unhealthyAlertInstancesCount 
singular="alert" plural="alerts"}}
+                  </span>
+                {{else}}
+                {{! no alerts }}
+                  <span {{translateAttr title="titlebar.alerts.noAlerts"}} 
class="label alerts-none-count">
+                    
{{App.router.mainAlertDefinitionsController.unhealthyAlertInstancesCount}} 
{{pluralize 
App.router.mainAlertDefinitionsController.unhealthyAlertInstancesCount 
singular="alert" plural="alerts"}}
+                  </span>
+                {{/if}}
+              </a>
             {{/if}}
-            </a>
+          {{! alerts label end }}
           {{else}}
             <a class="logo"><img src="/img/logo-white.png" alt="Apache Ambari" 
title="Apache Ambari"></a>
-            <a class="brand" title="Apache Ambari">{{t app.name}}</a>
+            <a title="Apache Ambari">{{t app.name}}</a>
           {{/if}}
+        </p>
+
+        {{! user dropdown }}
 
-          {{#if App.router.loggedIn}}
-            <div class="top-nav-user btn-group">
-              <button class="btn dropdown-toggle" data-toggle="dropdown">
-                <i 
class="icon-user"></i>&nbsp;{{App.router.displayLoginName}}&nbsp;<span 
class="caret"></span>
+        {{#if App.router.loggedIn}}
+          <ul class="nav navbar-nav navbar-right top-nav-user">
+            <li class="dropdown">
+              <button class="dropdown-toggle navbar-btn btn btn-default" 
data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                <i class="glyphicon 
glyphicon-user"></i>&nbsp;{{App.router.displayLoginName}}&nbsp;<span 
class="caret"></span>
               </button>
               <ul class="dropdown-menu">
-                <li><a href="" id="about" {{action showAboutPopup 
target="controller"}}>{{t app.aboutAmbari}}</a></li>
-                {{#if App.router.clusterInstallCompleted}}
-                  {{#if isClusterDataLoaded}}
-                    {{#isAuthorized "AMBARI.ADD_DELETE_CLUSTERS, 
AMBARI.ASSIGN_ROLES, AMBARI.EDIT_STACK_REPOS, AMBARI.MANAGE_GROUPS, 
AMBARI.MANAGE_STACK_VERSIONS, AMBARI.MANAGE_USERS, AMBARI.MANAGE_VIEWS, 
AMBARI.RENAME_CLUSTER, AMBARI.MANAGE_USERS"}}
-                      <li><a href=""
-                             id="manage-ambari" {{action goToAdminView 
target="controller"}}>{{t app.manageAmbari}}</a>
-                      </li>
-                    {{/isAuthorized}}
-                  {{/if}}
-                {{else}}
-                  {{#if App.isPermissionDataLoaded}}
-                    {{#isAuthorized "AMBARI.ADD_DELETE_CLUSTERS, 
AMBARI.ASSIGN_ROLES, AMBARI.EDIT_STACK_REPOS, AMBARI.MANAGE_GROUPS, 
AMBARI.MANAGE_STACK_VERSIONS, AMBARI.MANAGE_USERS, AMBARI.MANAGE_VIEWS, 
AMBARI.RENAME_CLUSTER, AMBARI.MANAGE_USERS"}}
-                      <li><a href=""
-                             id="manage-ambari" {{action goToAdminView 
target="controller"}}>{{t app.manageAmbari}}</a>
-                      </li>
-                    {{/isAuthorized}}
-                  {{/if}}
+
+                {{! about }}
+                <li><a href="#" id="about" {{action showAboutPopup 
target="controller"}}>{{t app.aboutAmbari}}</a></li>
+                {{! about end }}
+
+                {{! manage ambari }}
+                {{#if showManageAmbari}}
+                  {{#isAuthorized "AMBARI.ADD_DELETE_CLUSTERS, 
AMBARI.ASSIGN_ROLES, AMBARI.EDIT_STACK_REPOS, AMBARI.MANAGE_GROUPS, 
AMBARI.MANAGE_STACK_VERSIONS, AMBARI.MANAGE_USERS, AMBARI.MANAGE_VIEWS, 
AMBARI.RENAME_CLUSTER, AMBARI.MANAGE_USERS"}}
+                    <li>
+                      <a href="#" id="manage-ambari" {{action goToAdminView 
target="controller"}}>
+                        {{t app.manageAmbari}}
+                      </a>
+                    </li>
+                  {{/isAuthorized}}
                 {{/if}}
+                {{! manage ambari end }}
+
+                {{! user settings }}
                 {{#if isExistingClusterDataLoaded}}
                   {{#isAuthorized "AMBARI.MANAGE_SETTINGS"}}
-                    <li><a href="" {{action showSettingsPopup 
target="App.router.userSettingsController"}}>{{t app.settings}}</a></li>
+                    <li>
+                      <a href="#" {{action showSettingsPopup 
target="App.router.userSettingsController"}}>
+                        {{t app.settings}}
+                      </a>
+                    </li>
                   {{/isAuthorized}}
                 {{/if}}
+                {{! user settings end }}
+
+                {{! sign out }}
                 {{#if showExitLink}}
-                  <li class="break"></li>
+                  <li role="separator" class="divider"></li>
                   <li><a href="" id="sign-out" {{action logoff}}>{{t 
app.signout}}</a></li>
                 {{/if}}
+                {{! sign out end }}
+
               </ul>
-            </div>
-          {{/if}}
+            </li>
+          </ul>
+        {{/if}}
+        {{! user dropdown end }}
 
-          {{view App.MainMenuView}}
+        {{view App.MainMenuView}}
 
-        </div>
       </div>
-    </div>
+    </nav>
   </div>
+
   <div class="container main-container">
     <div id="content">
       {{#if App.wizardIsNotFinished}}
-        <div class="ru-badge span12">
-          <div class="navbar navbar-static-top clearfix">
-            <div class="span11">
+        <div class="ru-badge col-md-12">
+          <div class="clearfix">
+            <div class="col-md-11">
               {{#if isExistingClusterDataLoaded}}
-                <p class="span4 offset4">
-                {{#if App.router.wizardWatcherController.isNonWizardUser}}
-                  <span class="brand cluster-name">
+                <p class="col-md-4 col-md-offset-4">
+                  {{#if App.router.wizardWatcherController.isNonWizardUser}}
                     <span class="label upgrade-in-progress">
-                      <i 
class="icon-cog"></i>&nbsp;{{App.router.wizardWatcherController.wizardDisplayName}}
+                      <i class="glyphicon 
glyphicon-cog"></i>&nbsp;{{App.router.wizardWatcherController.wizardDisplayName}}
                     </span>
-                  </span>
-                {{/if}}
-                  {{#isAuthorized "CLUSTER.UPGRADE_DOWNGRADE_STACK"}}
-                    <a class="brand cluster-name" href="#">
-                  {{else}}
-                    <a class="brand cluster-name">
-                  {{/isAuthorized}}
-                  {{#if App.upgradeInProgress}}
-                    {{#if 
App.router.mainAdminStackAndUpgradeController.isDowngrade}}
-                      <span
-                              class="label upgrade-in-progress" {{action 
"openUpgradeDialog" target="App.router.mainAdminStackAndUpgradeController"}}>
-                             <i class="icon-cog"></i>&nbsp;{{t 
admin.stackVersions.version.downgrade.running}}</span>
-                    {{else}}
-                      <span
-                              class="label upgrade-in-progress" {{action 
"openUpgradeDialog" target="App.router.mainAdminStackAndUpgradeController"}}>
-                             <i class="icon-cog"></i>&nbsp;{{t 
admin.stackVersions.version.upgrade.running}}</span>
-                    {{/if}}
-                  {{/if}}
-                  {{#if App.upgradeHolding}}
-                    {{#if 
App.router.mainAdminStackAndUpgradeController.isDowngrade}}
-                      <span
-                              class="label upgrade-holding" {{action 
"openUpgradeDialog" target="App.router.mainAdminStackAndUpgradeController"}}>
-                          <i class="icon-pause"></i>&nbsp;{{t 
admin.stackVersions.version.downgrade.pause}}</span>
-                    {{else}}
-                      <span
-                              class="label upgrade-holding" {{action 
"openUpgradeDialog" target="App.router.mainAdminStackAndUpgradeController"}}>
-                          <i class="icon-pause"></i>&nbsp;{{t 
admin.stackVersions.version.upgrade.pause}}</span>
-                    {{/if}}
                   {{/if}}
-                  {{#if App.upgradeSuspended}}
-                    {{#if 
App.router.mainAdminStackAndUpgradeController.isDowngrade}}
-                      <span class="label upgrade-holding" {{action 
"openUpgradeDialog" target="App.router.mainAdminStackAndUpgradeController"}}>
-                        <i class="icon-pause"></i>&nbsp;{{t 
admin.stackVersions.version.downgrade.suspended}}
-                      </span>
-                    {{else}}
-                      <span class="label upgrade-holding" {{action 
"openUpgradeDialog" target="App.router.mainAdminStackAndUpgradeController"}}>
-                        <i class="icon-pause"></i>&nbsp;{{t 
admin.stackVersions.version.upgrade.suspended}}
+                  {{#if showUpgradeLabel}}
+                    <a href="#" {{action "openUpgradeDialog" 
target="App.router.mainAdminStackAndUpgradeController"}}>
+                      <span {{bindAttr class="upgradeMap.cls :label"}}>
+                        <i {{bindAttr class="upgradeMap.icon 
:glyphicon"}}></i>&nbsp;
+                        {{upgradeMap.msg}}
                       </span>
-                    {{/if}}
+                    </a>
                   {{/if}}
-                </a>
                 </p>
                 {{#if 
App.router.mainAdminStackAndUpgradeController.isFinalizeItem}}
-                  <p class="span10 alert alert-danger">{{t 
admin.stackVersions.version.upgrade.notFinalized.warning}}</p>
+                  <p class="col-md-10 alert alert-danger">{{t 
admin.stackVersions.version.upgrade.notFinalized.warning}}</p>
                 {{/if}}
               {{/if}}
             </div>
@@ -170,4 +159,4 @@
       {{outlet}}
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/2a77e39c/ambari-web/app/templates/common/assign_master_components.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/common/assign_master_components.hbs 
b/ambari-web/app/templates/common/assign_master_components.hbs
index 17763ca..a9da3e5 100644
--- a/ambari-web/app/templates/common/assign_master_components.hbs
+++ b/ambari-web/app/templates/common/assign_master_components.hbs
@@ -23,44 +23,44 @@
     {{{view.alertMessage}}}
   </div>
   {{#each msg in controller.generalErrorMessages}}
-    <div class="alert alert-error">{{msg}}</div>
+    <div class="alert alert-danger">{{msg}}</div>
   {{/each}}
   {{#each msg in controller.generalWarningMessages}}
       <div class="alert alert-warning">{{msg}}</div>
   {{/each}}
   {{#if controller.isLoaded}}
-    <div class="assign-masters row-fluid">
-      <div class="select-hosts span7">
-        <div class="row-fluid">
+    <div class="assign-masters row">
+      <div class="select-hosts col-md-7">
+        <div class="row col-md-12">
           {{#if showCurrentHost}}
-            <div class="span12 control-group mlc">
-              <div class="row-fluid">
-                <div class="span4"><span class="pull-right control-label">{{t 
services.reassign.step2.currentHost}}</span>
+            <div class="col-md-12 control-group mlc">
+              <div class="row">
+                <div class="col-md-4"><span class="pull-right 
control-label">{{t services.reassign.step2.currentHost}}</span>
                 </div>
-                <div class="span8"><span>{{currentHostId}}</span></div>
+                <div class="col-md-8"><span>{{currentHostId}}</span></div>
               </div>
             </div>
           {{/if}}
           <div class="clearfix"></div>
-          <div class="row-fluid">
-            <div class="span12 control-group">
+          <div class="row">
+            <div class="col-md-12 control-group">
               <form class="form-horizontal" autocomplete="off">
                 <!-- View for array controller -->
                 {{#each controller.additionalHostsList}}
-                  <div class="row-fluid additional-hosts-list">
-                    <div class="span5">
+                  <div class="row additional-hosts-list">
+                    <div class="col-md-5">
                       <label class="pts pull-right">
                         {{label}}
                       </label>
                     </div>
-                    <div class="span7 host-cell">
+                    <div class="col-md-7 host-cell">
                       {{host}}
                     </div>
                   </div>
                 {{/each}}
                 {{#each servicesMastersToShow}}
-                  <div class="row-fluid">
-                    <div class="span5">
+                  <div class="row">
+                    <div class="col-md-5">
                       <div class="control-group">
                         <label class="pts pull-right">
                           {{#if showCurrentPrefix}}
@@ -73,13 +73,13 @@
                         </label>
                       </div>
                     </div>
-                    <div class="span7">
+                    <div class="col-md-7">
                       {{#if isServiceCoHost}}
                         <div class="hostName">
-                          {{selectedHost}}<i 
class="icon-asterisks">&#10037;</i>
+                          {{selectedHost}}<i class="glyphicon 
glyphicon-asterisks">&#10037;</i>
                         </div>
                       {{else}}
-                        <div {{bindAttr class="errorMessage:error: 
warnMessage:warning: :control-group"}}>
+                        <div {{bindAttr class="errorMessage:error: 
warnMessage:warning: :form-group"}}>
                           {{#if view.shouldUseInputs}}
                             {{view App.InputHostView
                             componentBinding="this"
@@ -100,12 +100,12 @@
 
                           <span rel="popover" title="Warning" {{bindAttr 
data-content="warnMessage"}}>
                             {{#if warnMessage}}
-                              <i class="icon-warning-sign"></i>
+                              <i class="glyphicon glyphicon-warning-sign"></i>
                             {{/if}}
                           </span>
                           <span rel="popover" title="Error" {{bindAttr 
data-content="errorMessage"}}>
                             {{#if errorMessage}}
-                              <i class="icon-exclamation-sign"></i>
+                              <i class="glyphicon 
glyphicon-exclamation-sign"></i>
                             {{/if}}
                           </span>
                         </div>
@@ -119,7 +119,7 @@
         </div>
       </div>
 
-      <div class="host-assignments span5">
+      <div class="host-assignments col-md-5">
         {{#each masterHostMapping}}
           <div class="mapping-box round-corners well">
             <div class="hostString"><span>{{hostInfo}}</span></div>
@@ -141,7 +141,7 @@
   {{/if}}
   <div class="btn-area">
     {{#if view.isBackButtonVisible}}
-      <button type="button" class="btn pull-left installer-back-btn" 
{{bindAttr disabled="App.router.btnClickInProgress"}} {{action back}}>
+      <button type="button" class="btn btn-default pull-left 
installer-back-btn" {{bindAttr disabled="App.router.btnClickInProgress"}} 
{{action back}}>
         &larr; {{t common.back}}
         {{#if App.router.backBtnClickInProgress}}
           {{view App.SpinnerView tagName="span" 
classNames="service-button-spinner"}}
@@ -155,7 +155,7 @@
       {{view.acceptButtonText}}
     </button>
     {{#if view.isCancelButtonVisible}}
-      <button class="btn pull-right mrm" {{action onCancel 
target="controller"}}>{{t common.cancel}}</button>
+      <button class="btn btn-default pull-right mrm" {{action onCancel 
target="controller"}}>{{t common.cancel}}</button>
     {{/if}}
   </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/2a77e39c/ambari-web/app/templates/common/chart/linear_time.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/common/chart/linear_time.hbs 
b/ambari-web/app/templates/common/chart/linear_time.hbs
index 2844728..4f1dc28 100644
--- a/ambari-web/app/templates/common/chart/linear_time.hbs
+++ b/ambari-web/app/templates/common/chart/linear_time.hbs
@@ -23,14 +23,14 @@
     {{view view.timeRangeListView}}
     <a {{bindAttr class="view.isExportButtonHidden:hidden :corner-icon"}}
         href="#" {{action toggleFormatsList target="view"}}>
-      {{t common.export}} <i class="icon-save"></i>
+      {{t common.export}} <i class="glyphicon glyphicon-save"></i>
     </a>
     {{view view.exportMetricsMenuView}}
   </div>
   {{#if view.isTimePagingEnable}}
     <div {{bindAttr class="view.leftArrowVisible:visibleArrow :arrow-left"}} 
{{action "switchTimeBack" target="view.parentView"}}></div>
   {{/if}}
-  <div {{bindAttr id="view.containerId"}} {{bindAttr 
class="view.isReady:show:hide view.containerClass :chart-container"}}>
+  <div {{bindAttr id="view.containerId"}} {{bindAttr 
class="view.isReady:shown:hidden view.containerClass :chart-container"}}>
     <div {{bindAttr id="view.yAxisId"}} {{bindAttr class="view.yAxisClass 
:chart-y-axis"}}></div>
     <div {{bindAttr id="view.xAxisId"}} {{bindAttr class="view.xAxisClass 
:chart-x-axis"}}></div>
     <div {{bindAttr id="view.legendId"}} {{bindAttr class="view.legendClass 
:chart-legend"}}></div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/2a77e39c/ambari-web/app/templates/common/configs/addPropertyWindow.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/common/configs/addPropertyWindow.hbs 
b/ambari-web/app/templates/common/configs/addPropertyWindow.hbs
index 1d41b04..6614de6 100644
--- a/ambari-web/app/templates/common/configs/addPropertyWindow.hbs
+++ b/ambari-web/app/templates/common/configs/addPropertyWindow.hbs
@@ -16,57 +16,59 @@
 * limitations under the License.
 }}
 <form class="form-horizontal add-property-window" autocomplete="off">
-  <div class="each-row control-group">
-    <label class="control-label">{{t common.type}}</label>
-
-    <div class="controls">
-      <input class="span4" type="text" disabled {{bindAttr 
value="view.fileName"}}/>
+  <div class="each-row form-group">
+    <label class="control-label col-md-2">{{t common.type}}</label>
 
+    <div class="col-md-5">
+      <input class="form-control" type="text" disabled {{bindAttr 
value="view.fileName"}}/>
+    </div>
+    <div class="col-md-5">
       <div class="btn-group add-mode pull-right" {{action toggleBulkMode 
target="view" }}>
         <a href="#"
-          {{bindAttr class=":btn view.serviceConfigObj.isBulkMode::active"}}
+          {{bindAttr class=":btn :btn-default 
view.serviceConfigObj.isBulkMode::active"}}
           {{translateAttr 
title="services.service.config.addPropertyWindow.singleMode" }}
-           data-toggle="tooltip"><i class="icon-tag"></i></a>
+           data-toggle="tooltip"><i class="glyphicon glyphicon-tag"></i></a>
         <a href="#"
-          {{bindAttr class=":btn view.serviceConfigObj.isBulkMode:active"}}
+          {{bindAttr class=":btn :btn-default 
view.serviceConfigObj.isBulkMode:active"}}
           {{translateAttr 
data-original-title="services.service.config.addPropertyWindow.bulkMode" }}
-           data-toggle="tooltip"><i class="icon-tags"></i></a>
+           data-toggle="tooltip"><i class="glyphicon glyphicon-tags"></i></a>
       </div>
     </div>
+    <div class="clearfix"></div>
   </div>
   {{#if view.serviceConfigObj.isBulkMode}}
-    <div {{bindAttr class="view.serviceConfigObj.bulkConfigError:error 
:each-row :control-group"}}>
-      <label class="control-label">
+    <div {{bindAttr class="view.serviceConfigObj.bulkConfigError:has-error 
:each-row :form-group"}}>
+      <label class="control-label col-md-2">
         {{t services.service.config.addPropertyWindow.properties}}
         <br>
         <small>{{t 
services.service.config.addPropertyWindow.propertiesHelper}}</small>
       </label>
 
-      <div class="controls">
+      <div class="col-md-10">
         {{view Ember.TextArea
         valueBinding="view.serviceConfigObj.bulkConfigValue" rows="4"
-        classNames="input-block-level"
+        classNames="input-block-level form-control"
         
placeholderTranslation="services.service.config.addPropertyWindow.propertiesPlaceholder"
         }}
-        <span 
class="help-inline">{{{view.serviceConfigObj.bulkConfigErrorMessage}}}</span>
+        <span class="help-block 
validation-block">{{{view.serviceConfigObj.bulkConfigErrorMessage}}}</span>
       </div>
     </div>
   {{else}}
-    <div {{bindAttr class="view.serviceConfigObj.isKeyError:error :each-row 
:control-group"}}>
-      <label class="control-label">{{t common.key}}</label>
-      <div class="controls">
-        {{view Ember.TextField valueBinding="view.serviceConfigObj.name" 
class="input-block-level"}}
+    <div {{bindAttr class="view.serviceConfigObj.isKeyError:has-error 
:each-row :form-group"}}>
+      <label class="control-label col-md-2">{{t common.key}}</label>
+      <div class="col-md-10">
+        {{view Ember.TextField valueBinding="view.serviceConfigObj.name" 
class="input-block-level form-control"}}
 
         {{#if view.serviceConfigObj.isKeyError}}
-          <span class="help-inline">
-            <i class="icon-exclamation-sign"></i>
+          <span class="help-block validation-block">
             {{view.serviceConfigObj.errorMessage}}
           </span>
         {{else}}
           {{#if view.serviceConfigObj.isKeyWarning}}
-            <span class="help-inline">
-              <i class="icon-warning-sign"></i>
-              {{view.serviceConfigObj.warningMessage}}
+            <span class="has-warning">
+              <span class="help-block validation-block">
+                {{view.serviceConfigObj.warningMessage}}
+              </span>
             </span>
           {{/if}}
         {{/if}}
@@ -80,19 +82,19 @@
         {{/if}}
       </div>
     </div>
-    <div class="each-row control-group">
-      <label class="control-label">{{t common.value}}</label>
+    <div class="each-row form-group">
+      <label class="control-label col-md-2">{{t common.value}}</label>
 
-      <div class="controls">
-        {{view Ember.TextArea valueBinding="view.serviceConfigObj.value" 
rows="4" classNames="input-block-level"}}
+      <div class="col-md-10">
+        {{view Ember.TextArea valueBinding="view.serviceConfigObj.value" 
rows="4" classNames="input-block-level form-control"}}
       </div>
     </div>
-    <div class="each-row control-group">
-      <label class="control-label">{{t common.propertyType}}</label>
+    <div class="each-row form-group">
+      <label class="control-label col-md-2">{{t common.propertyType}}</label>
 
-      <div class="controls">
+      <div class="col-md-10">
         {{view Em.Select
-            classNames="input-block-level"
+            classNames="input-block-level form-control"
             multiple="multiple"
             contentBinding="view.serviceConfigObj.content"
             selectionBinding="view.serviceConfigObj.propertyType"

http://git-wip-us.apache.org/repos/asf/ambari/blob/2a77e39c/ambari-web/app/templates/common/configs/compare_property.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/common/configs/compare_property.hbs 
b/ambari-web/app/templates/common/configs/compare_property.hbs
index 29c6ed7..df35e9e 100644
--- a/ambari-web/app/templates/common/configs/compare_property.hbs
+++ b/ambari-web/app/templates/common/configs/compare_property.hbs
@@ -17,18 +17,22 @@
 }}
 
 {{#each compareConfig in view.serviceConfigProperty.compareConfigs}}
-    <div {{bindAttr class=":control-group :overrideField"}}>
-      {{view compareConfig.viewClass serviceConfigBinding="compareConfig" 
versionBinding="compareConfig.serviceVersion.version" 
categoryConfigsAllBinding="view.parentView.categoryConfigsAll"}}
-      <span class="label 
label-info">{{compareConfig.serviceVersion.versionText}}</span>
-      {{#if compareConfig.serviceVersion.isCurrent}}
-        <span class="label label-success">{{t common.current}}</span>
-      {{/if}}
-      {{#unless compareConfig.isMock}}
-        {{#if compareConfig.supportsFinal}}
-            <a disabled="disabled" {{bindAttr class=":btn-small :btn-final 
compareConfig.isFinal:active compareConfig.hideFinalIcon:hidden" }}>
-                <i class="icon-lock"></i>
-            </a>
+  <div {{bindAttr class=":form-group :overrideField"}}>
+    <div class="row">
+      <div class="col-md-9">
+        {{view compareConfig.viewClass serviceConfigBinding="compareConfig" 
versionBinding="compareConfig.serviceVersion.version" 
categoryConfigsAllBinding="view.parentView.categoryConfigsAll"}}
+        <span class="label 
label-info">{{compareConfig.serviceVersion.versionText}}</span>
+        {{#if compareConfig.serviceVersion.isCurrent}}
+          <span class="label label-success">{{t common.current}}</span>
         {{/if}}
-      {{/unless}}
+        {{#unless compareConfig.isMock}}
+          {{#if compareConfig.supportsFinal}}
+              <a disabled="disabled" {{bindAttr class=":btn-sm :btn-final 
compareConfig.isFinal:active compareConfig.hideFinalIcon:hidden" }}>
+                  <i class="glyphicon glyphicon-lock"></i>
+              </a>
+          {{/if}}
+        {{/unless}}
+      </div>
     </div>
+  </div>
 {{/each}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/2a77e39c/ambari-web/app/templates/common/configs/config_history_dropdown_row.hbs
----------------------------------------------------------------------
diff --git 
a/ambari-web/app/templates/common/configs/config_history_dropdown_row.hbs 
b/ambari-web/app/templates/common/configs/config_history_dropdown_row.hbs
index dcc6b31..80e6878 100644
--- a/ambari-web/app/templates/common/configs/config_history_dropdown_row.hbs
+++ b/ambari-web/app/templates/common/configs/config_history_dropdown_row.hbs
@@ -16,9 +16,9 @@
 * limitations under the License.
 }}
 
-<div class="row-fluid version-in-dropdown" {{action doAction 
view.serviceVersion view.actionTypes.SWITCH target="view"}}>
-  <div class="span2">{{view.serviceVersion.versionText}}</div>
-  <div class="span6">{{view.serviceVersion.createdDate}}</div>
-  <div class="span3">{{view.serviceVersion.authorFormatted}}</div>
-  <div class="pull-right"><i class="icon-caret-right"></i></div>
+<div class="row version-in-dropdown" {{action doAction view.serviceVersion 
view.actionTypes.SWITCH target="view"}}>
+  <div class="col-md-2">{{view.serviceVersion.versionText}}</div>
+  <div class="col-md-6">{{view.serviceVersion.createdDate}}</div>
+  <div class="col-md-3">{{view.serviceVersion.authorFormatted}}</div>
+  <div class="pull-right"><i class="glyphicon glyphicon-caret-right"></i></div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/2a77e39c/ambari-web/app/templates/common/configs/config_history_flow.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/common/configs/config_history_flow.hbs 
b/ambari-web/app/templates/common/configs/config_history_flow.hbs
index fa67786..59d6491 100644
--- a/ambari-web/app/templates/common/configs/config_history_flow.hbs
+++ b/ambari-web/app/templates/common/configs/config_history_flow.hbs
@@ -19,23 +19,23 @@
 
 <div id="config_history_flow" {{bindAttr 
class="view.parentView.supportsConfigLayout:with-enhanced-config"}}>
   <div class="version-slider">
-    <div {{bindAttr class=":icon-chevron-box :pull-left 
view.showLeftArrow::disabled"}} {{action shiftBack target="view"}} 
data-toggle="arrow-tooltip"
-      {{bindAttr data-original-title="view.leftArrowTooltip"}}><i 
class="icon-chevron-left icon-3x"></i></div>
-    <div {{bindAttr class=":icon-chevron-box :pull-left 
view.showRightArrow::disabled"}} {{action shiftForward target="view"}} 
data-toggle="arrow-tooltip"
-      {{bindAttr data-original-title="view.rightArrowTooltip"}}><i 
class="icon-chevron-right icon-3x"></i></div>
+    <div {{bindAttr class=":glyphicon :glyphicon-chevron-box :pull-left 
view.showLeftArrow::disabled"}} {{action shiftBack target="view"}} 
data-toggle="arrow-tooltip"
+      {{bindAttr data-original-title="view.leftArrowTooltip"}}><i 
class="glyphicon-chevron-left glyphicon glyphicon-3x"></i></div>
+    <div {{bindAttr class=":glyphicon :glyphicon-chevron-box :pull-left 
view.showRightArrow::disabled"}} {{action shiftForward target="view"}} 
data-toggle="arrow-tooltip"
+      {{bindAttr data-original-title="view.rightArrowTooltip"}}><i 
class="glyphicon-chevron-right glyphicon glyphicon-3x"></i></div>
     {{#each sV in view.visibleServiceVersion}}
       {{view App.ConfigsServiceVersionBoxView serviceVersionBinding="sV"}}
     {{/each}}
 
   </div>
-  <div class="version-info-bar-wrapper">
+  <div class="version-info-bar-wrapper row">
     {{#isAuthorized "SERVICE.COMPARE_CONFIGS"}}
-      <div {{bindAttr class="view.showCompareVersionBar::hidden 
:version-info-bar"}}>
-        <div class="row-fluid">
-          <div class="span1 remove-compare-bar" {{action 
removeCompareVersionBar target="view"}} data-toggle="arrow-tooltip" 
{{translateAttr 
data-original-title="services.service.config.configHistory.dismissIcon.tooltip"}}>
-            <i class="icon-remove-circle icon-large"></i>
+      <div {{bindAttr class="view.showCompareVersionBar::hidden 
:version-info-bar :col-md-12"}}>
+        <div class="version-info-bar">
+          <div class="col-md-1 remove-compare-bar" {{action 
removeCompareVersionBar target="view"}} data-toggle="arrow-tooltip" 
{{translateAttr 
data-original-title="services.service.config.configHistory.dismissIcon.tooltip"}}>
+            <i class="glyphicon-remove-circle glyphicon glyphicon-large"></i>
           </div>
-          <div class="label-wrapper span8" data-toggle="tooltip" {{bindAttr 
data-original-title="view.compareServiceVersion.fullNotes"}}>
+          <div class="label-wrapper col-md-8" data-toggle="tooltip" {{bindAttr 
data-original-title="view.compareServiceVersion.fullNotes"}}>
             {{t services.service.config.configHistory.comparing}}
             <span class="label label-info 
current-version-label">{{view.displayedServiceVersion.versionText}}</span>
             ...
@@ -46,7 +46,7 @@
               
<strong>{{view.compareServiceVersion.authorFormatted}}</strong>&nbsp;{{t 
dashboard.configHistory.info-bar.authoredOn}}
               &nbsp;<strong>{{view.compareServiceVersion.createdDate}}</strong>
           </div>
-          {{#isAuthorized "SERVICE.MODIFY_CONFIGS"}}
+            {{#isAuthorized "SERVICE.MODIFY_CONFIGS"}}
             <div class="pull-right operations-button">
               <button class="btn btn-success"  {{action doAction 
view.serviceVersionsReferences.compare view.actionTypes.REVERT target="view"}} 
{{bindAttr disabled="view.versionActionsDisabled" 
class="view.compareServiceVersion.canBeMadeCurrent::hidden"}}>{{view.compareServiceVersion.makeCurrentButtonText}}</button>
             </div>
@@ -64,21 +64,21 @@
           <div 
class="notes">{{view.parentView.hoveredServiceVersion.fullNotes}}</div>
         </div>
         <div class="version-operations-buttons">
-          <button {{bindAttr 
disabled="view.parentView.hoveredServiceVersion.disabledActionAttr.view" 
class=":btn 
view.parentView.hoveredServiceVersion.isDisplayed:not-allowed-cursor" 
title="view.parentView.hoveredServiceVersion.disabledActionMessages.view"}} 
{{action doAction view.parentView.hoveredServiceVersion 
view.parentView.actionTypes.SWITCH target="view.parentView"}}><i 
class="icon-search"></i>&nbsp;{{t common.view}}</button>
+          <button {{bindAttr 
disabled="view.parentView.hoveredServiceVersion.disabledActionAttr.view" 
class=":btn :btn-default 
view.parentView.hoveredServiceVersion.isDisplayed:not-allowed-cursor" 
title="view.parentView.hoveredServiceVersion.disabledActionMessages.view"}} 
{{action doAction view.parentView.hoveredServiceVersion 
view.parentView.actionTypes.SWITCH target="view.parentView"}}><i 
class="glyphicon glyphicon-search"></i>&nbsp;{{t common.view}}</button>
           {{#isAuthorized "SERVICE.COMPARE_CONFIGS"}}
-            <button {{bindAttr 
disabled="view.parentView.hoveredServiceVersion.disabledActionAttr.compare" 
class=":btn 
view.parentView.hoveredServiceVersion.isDisplayed:not-allowed-cursor" 
title="view.parentView.hoveredServiceVersion.disabledActionMessages.compare"}} 
{{action doAction view.parentView.hoveredServiceVersion 
view.parentView.actionTypes.COMPARE target="view.parentView"}}><i 
class="icon-copy"></i>&nbsp;{{t common.compare}}</button>
+            <button {{bindAttr 
disabled="view.parentView.hoveredServiceVersion.disabledActionAttr.compare" 
class=":btn :btn-default 
view.parentView.hoveredServiceVersion.isDisplayed:not-allowed-cursor" 
title="view.parentView.hoveredServiceVersion.disabledActionMessages.compare"}} 
{{action doAction view.parentView.hoveredServiceVersion 
view.parentView.actionTypes.COMPARE target="view.parentView"}}><i 
class="glyphicon glyphicon-copy"></i>&nbsp;{{t common.compare}}</button>
           {{/isAuthorized}}
           {{#isAuthorized "SERVICE.MODIFY_CONFIGS"}}
-            <button {{bindAttr 
disabled="view.parentView.hoveredServiceVersion.disabledActionAttr.revert" 
class=":btn view.parentView.hoveredServiceVersion.isCurrent:not-allowed-cursor 
view.parentView.hoveredServiceVersion.isCompatible::hidden" 
title="view.parentView.hoveredServiceVersion.disabledActionMessages.revert"}} 
{{action doAction view.parentView.hoveredServiceVersion 
view.parentView.actionTypes.REVERT target="view.parentView"}}>{{t 
dashboard.configHistory.info-bar.revert.button}}</button>
+            <button {{bindAttr 
disabled="view.parentView.hoveredServiceVersion.disabledActionAttr.revert" 
class=":btn :btn-default 
view.parentView.hoveredServiceVersion.isCurrent:not-allowed-cursor 
view.parentView.hoveredServiceVersion.isCompatible::hidden" 
title="view.parentView.hoveredServiceVersion.disabledActionMessages.revert"}} 
{{action doAction view.parentView.hoveredServiceVersion 
view.parentView.actionTypes.REVERT target="view.parentView"}}>{{t 
dashboard.configHistory.info-bar.revert.button}}</button>
           {{/isAuthorized}}
         </div>
       {{/if}}
     {{/view}}
-    <div class="version-info-bar">
-      <div class="row-fluid">
+    <div class="version-info-bar col-md-12">
+      <div>
         <div class="btn-group pull-left">
-          <button id="toggle-dropdown-button" class="btn dropdown-toggle" 
data-toggle="dropdown" href="#" {{action hideFullList target="view"}} 
{{bindAttr disabled="view.versionActionsDisabled"}}>
-            <i class="icon-random"></i>
+          <button id="toggle-dropdown-button" class="btn btn-default 
dropdown-toggle" data-toggle="dropdown" href="#" {{action hideFullList 
target="view"}} {{bindAttr disabled="view.versionActionsDisabled"}}>
+            <i class="glyphicon glyphicon-random"></i>
             <span class="caret"></span>
           </button>
           <div id="dropdown_content" class="dropdown-menu">
@@ -98,21 +98,23 @@
             </ul>
           </div>
         </div>
-        <div class="label-wrapper span8" data-toggle="tooltip" {{bindAttr 
data-original-title="view.displayedServiceVersion.fullNotes"}}>
+        <div class="label-wrapper col-md-8" data-toggle="tooltip" {{bindAttr 
data-original-title="view.displayedServiceVersion.fullNotes"}}>
           {{#if view.displayedServiceVersion.versionText}}
             <span class="label label-info 
current-version-label">{{view.displayedServiceVersion.versionText}}</span>
           {{/if}}
           {{#if view.displayedServiceVersion.isCurrent}}
-              <span class="label-current label label-success icon-ok" 
data-toggle="tooltip" {{translateAttr title="common.current"}}></span>
+              <span class="label label-current label-success" 
data-toggle="tooltip" {{translateAttr title="common.current"}}>
+                <i class="glyphicon glyphicon-ok"></i>
+              </span>
           {{/if}}
           {{#if view.displayedServiceVersion.author}}
-            
<strong>{{view.displayedServiceVersion.authorFormatted}}</strong>&nbsp;{{t 
dashboard.configHistory.info-bar.authoredOn}}&nbsp;<strong>{{view.displayedServiceVersion.createdDate}}</strong>
+            
&nbsp;<strong>{{view.displayedServiceVersion.authorFormatted}}</strong>&nbsp;{{t
 
dashboard.configHistory.info-bar.authoredOn}}&nbsp;<strong>{{view.displayedServiceVersion.createdDate}}</strong>
           {{/if}}
         </div>
         {{#isAuthorized "SERVICE.MODIFY_CONFIGS"}}
           <div class="pull-right operations-button">
             <div {{bindAttr 
class="view.displayedServiceVersion.isCurrent::hidden"}}>
-              <button class="btn" {{action doCancel target="controller"}} 
{{bindAttr disabled="view.isDiscardDisabled"}}>{{t common.discard}}</button>
+              <button class="btn btn-default" {{action doCancel 
target="controller"}} {{bindAttr disabled="view.isDiscardDisabled"}}>{{t 
common.discard}}</button>
               <button class="btn btn-success" {{action save target="view"}} 
{{bindAttr disabled="view.isSaveDisabled"}}>{{t common.save}}</button>
             </div>
             <button class="btn btn-success"  {{action doAction 
view.serviceVersionsReferences.displayed view.actionTypes.REVERT 
target="view"}} {{bindAttr disabled="view.versionActionsDisabled" 
class="view.displayedServiceVersion.canBeMadeCurrent::hidden"}}>{{view.displayedServiceVersion.makeCurrentButtonText}}</button>

http://git-wip-us.apache.org/repos/asf/ambari/blob/2a77e39c/ambari-web/app/templates/common/configs/controls.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/common/configs/controls.hbs 
b/ambari-web/app/templates/common/configs/controls.hbs
index 0a7d21e..db12e3c 100644
--- a/ambari-web/app/templates/common/configs/controls.hbs
+++ b/ambari-web/app/templates/common/configs/controls.hbs
@@ -21,38 +21,38 @@
 {{else}}
   {{#if view.showIsFinal}}
     <a href="#" data-toggle="tooltip"
-      {{bindAttr class=":btn-small :btn-final 
view.serviceConfigProperty.isFinal:active 
view.serviceConfigProperty.hideFinalIcon:hidden" 
disabled="view.serviceConfigProperty.isNotEditable"}}
+      {{bindAttr class=":btn-sm :btn-final 
view.serviceConfigProperty.isFinal:active 
view.serviceConfigProperty.hideFinalIcon:hidden" 
disabled="view.serviceConfigProperty.isNotEditable"}}
       {{action "toggleFinalFlag" this target="view.parentView"}}
       {{translateAttr data-original-title="services.service.config.final"}}>
-      <i class="icon-lock"></i>
+      <i class="glyphicon glyphicon-lock"></i>
     </a>
   {{/if}}
   {{#if view.showOverride}}
-    <a href="#" data-toggle="tooltip" class="btn-small"
+    <a href="#" data-toggle="tooltip" class="btn-sm"
       {{action "createOverrideProperty" this target="view.parentView"}}
       {{translateAttr data-original-title="common.override"}}>
-      <i class="icon-plus-sign"></i>
+      <i class="glyphicon glyphicon-plus-sign"></i>
     </a>
   {{/if}}
   {{#if view.showUndo}}
-    <a href="#" data-toggle="tooltip" class="btn-small"
+    <a href="#" data-toggle="tooltip" class="btn-sm"
       {{action "doRestoreDefaultValue" this target="view.parentView"}}
       {{translateAttr data-original-title="common.undo"}}>
       <i class="icon-undo"></i>
     </a>
   {{/if}}
   {{#if view.showRemove}}
-    <a href="#" data-toggle="tooltip" class="btn-small 
remove-config-property-button"
+    <a href="#" data-toggle="tooltip" class="btn-sm 
remove-config-property-button"
       {{action "removeProperty" this target="view.parentView"}}
       {{translateAttr data-original-title="common.remove"}}>
-      <i class="icon-minus-sign"></i>
+      <i class="glyphicon glyphicon-minus-sign"></i>
     </a>
   {{/if}}
   {{#if view.showSetRecommended}}
-    <a href="#" data-toggle="tooltip" class="btn-small"
+    <a href="#" data-toggle="tooltip" class="btn-sm"
       {{action "setRecommendedValue" this target="view.parentView"}}
       {{translateAttr 
data-original-title="services.service.config.setRecommendedValue"}}>
-      <i class="icon-repeat"></i>
+      <i class="glyphicon glyphicon-repeat"></i>
     </a>
   {{/if}}
 {{/if}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/2a77e39c/ambari-web/app/templates/common/configs/notifications_configs.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/common/configs/notifications_configs.hbs 
b/ambari-web/app/templates/common/configs/notifications_configs.hbs
index 062a1eb..1c589b1 100644
--- a/ambari-web/app/templates/common/configs/notifications_configs.hbs
+++ b/ambari-web/app/templates/common/configs/notifications_configs.hbs
@@ -16,71 +16,105 @@
 * limitations under the License.
 }}
 
-<div class="accordion-heading" {{action "onToggleBlock" category 
target="view"}}>
-  <i {{bindAttr class=":pull-left :accordion-toggle 
view.category.isCollapsed:icon-caret-right:icon-caret-down"}}></i>
-  <a class="accordion-toggle">{{view.category.displayName}}</a>
-</div>
-
-<div class="accordion-body collapse in" {{bindAttr 
style="view.isCategoryBodyVisible"}}>
-  <div class="accordion-inner service-config-section">
-    <form class="form-horizontal" autocomplete="off">
-
-      <div class="entry-row">
-        {{view Ember.RadioButton name="createNotification" 
selectionBinding="view.createNotification" value="no"}} {{t 
installer.step7.misc.notification.configure.later}}
-      </div>
+<div class="panel panel-default">
+  <div class="panel-heading" {{action "onToggleBlock" category target="view"}}>
+    <h3 class="panel-title">
+      <i {{bindAttr class=":pull-left :panel-toggle 
view.category.isCollapsed:icon-caret-right:icon-caret-down"}}></i>
+      <a class="panel-toggle">{{view.category.displayName}}</a>
+    </h3>
+  </div>
 
-      <div class="entry-row">
-        {{view Ember.RadioButton name="createNotification" 
selectionBinding="view.createNotification" value="yes"}} {{t 
installer.step7.misc.notification.configure}}
-      </div>
+  <div class="panel-body collapse in" {{bindAttr 
style="view.isCategoryBodyVisible"}}>
+    <div class="service-config-section">
+      <form class="form-horizontal" autocomplete="off">
 
-      {{#each config in view.categoryConfigs}}
-        <div {{bindAttr class=":entry-row config.rowStyleClass 
config.isUserProperty:indent-1"}}>
-          <span {{bindAttr class="config.errorMessage:error: :control-group 
:control-label-span"}}>
-            <label class="control-label">
-              {{formatWordBreak config.displayName}}
+        <div class="entry-row row">
+          <div class="checkbox">
+            <label>
+                {{view Ember.RadioButton name="createNotification" 
selectionBinding="view.createNotification" value="no" type="radio"}}
+                {{t installer.step7.misc.notification.configure.later}}
             </label>
-          </span>
+          </div>
+        </div>
 
-          <div {{bindAttr class="config.showLabel:controls"}}>
-            <div {{bindAttr class="config.errorMessage:error: 
config.warnMessage:warning: :control-group"}}>
-              {{view config.viewClass serviceConfigBinding="config" 
categoryConfigsAllBinding="view.categoryConfigsAll" }}
+        <div class="entry-row row">
+          <div class="checkbox">
+            <label>
+                {{view Ember.RadioButton name="createNotification" 
selectionBinding="view.createNotification" value="yes" type="radio"}}
+                {{t installer.step7.misc.notification.configure}}
+            </label>
+          </div>
+        </div>
 
-              {{#if config.isRemovable}}
-                {{#isAuthorized "SERVICE.MODIFY_CONFIGS"}}
-                  {{#unless config.isComparison}}
-                    <a class="btn-small" href="#" data-toggle="tooltip"
-                      {{action "removeProperty" config target="view"}}
-                      {{translateAttr data-original-title="common.remove"}}>
-                      <i class="icon-minus-sign"></i>
-                    </a>
-                  {{/unless}}
-                {{/isAuthorized}}
-              {{/if}}
+          {{#each config in view.categoryConfigs}}
+            <div {{bindAttr class=":entry-row :row config.rowStyleClass 
config.isUserProperty:indent-1"}}>
+              <span {{bindAttr class="config.errorMessage:error: :form-group 
:control-label-span :col-md-3"}}>
+                <label class="control-label">
+                  {{formatWordBreak config.displayName}}
+                </label>
+              </span>
 
-              <span class="help-inline">{{config.errorMessage}}</span>
-              <span class="help-inline">{{config.warnMessage}}</span>
+              <div class="col-md-9">
+                <div {{bindAttr class="config.errorMessage:error: 
config.warnMessage:warning: :form-group"}}>
+                  <div class="row">
+                    <div class="col-md-9">
+                        {{view config.viewClass serviceConfigBinding="config" 
categoryConfigsAllBinding="view.categoryConfigsAll" }}
+                    </div>
+                    <div class="col-md-3">
+                        {{#if config.isRemovable}}
+                            {{#isAuthorized "SERVICE.MODIFY_CONFIGS"}}
+                                {{#unless config.isComparison}}
+                                  <a class="btn-sm" href="#" 
data-toggle="tooltip"
+                                      {{action "removeProperty" config 
target="view"}}
+                                      {{translateAttr 
data-original-title="common.remove"}}>
+                                    <i class="icon-minus-sign"></i>
+                                  </a>
+                                {{/unless}}
+                            {{/isAuthorized}}
+                        {{/if}}
+                      {{#if config.errorMessage}}
+                        <span class="help-block 
validation-block">{{config.errorMessage}}</span>
+                      {{/if}}
+                      {{#if config.warnMessage}}
+                        <span class="help-block 
validation-block">{{config.warnMessage}}</span>
+                      {{/if}}
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
+          {{/each}}
+
+        <div class="entry-row row indent-1">
+          <div class="checkbox">
+            <label>
+                {{view Ember.RadioButton name="tlsOrSsl" 
disabledBinding="view.configsAreDisabled" selectionBinding="view.tlsOrSsl" 
value="tls"}}
+                {{t installer.step7.misc.notification.use_tls}}
+            </label>
           </div>
         </div>
-      {{/each}}
 
-      <div class="entry-row indent-1">
-        {{view Ember.RadioButton name="tlsOrSsl" 
disabledBinding="view.configsAreDisabled" selectionBinding="view.tlsOrSsl" 
value="tls"}} {{t installer.step7.misc.notification.use_tls}}
-      </div>
-
-      <div class="entry-row indent-1">
-        {{view Ember.RadioButton name="tlsOrSsl" 
disabledBinding="view.configsAreDisabled" selectionBinding="view.tlsOrSsl" 
value="ssl"}} {{t installer.step7.misc.notification.use_ssl}}
-      </div>
+        <div class="entry-row row indent-1">
+          <div class="checkbox">
+            <label>
+                {{view Ember.RadioButton name="tlsOrSsl" 
disabledBinding="view.configsAreDisabled" selectionBinding="view.tlsOrSsl" 
value="ssl"}}
+                {{t installer.step7.misc.notification.use_ssl}}
+            </label>
+          </div>
+        </div>
 
-      {{#isAuthorized "SERVICE.MODIFY_CONFIGS"}}
-        {{#if view.canEdit}}
-          {{#unless view.configsAreDisabled}}
-            <div class="entry-row indent-1">
-             <a href="#" {{action "showAddPropertyWindow" this target="view" 
}} >{{t installer.step7.config.addProperty}}...</a>
-            </div>
-          {{/unless}}
-        {{/if}}
-      {{/isAuthorized}}
-    </form>
+          {{#isAuthorized "SERVICE.MODIFY_CONFIGS"}}
+              {{#if view.canEdit}}
+                  {{#unless view.configsAreDisabled}}
+                    <div class="entry-row indent-1">
+                      <a
+                        href="#" {{action "showAddPropertyWindow" this 
target="view" }} >{{t installer.step7.config.addProperty}}
+                        ...</a>
+                    </div>
+                  {{/unless}}
+              {{/if}}
+          {{/isAuthorized}}
+      </form>
+    </div>
   </div>
 </div>

Reply via email to