diff --git a/dist/less/order-service.less b/dist/less/order-service.less
index fd35204b..38650ace 100644
--- a/dist/less/order-service.less
+++ b/dist/less/order-service.less
@@ -75,6 +75,9 @@
 
 .order-service-config {
   padding: 0 (@grid-gutter-width / 2);
+  @media (max-width: @screen-xs-max) {
+    position: relative; // so label.required:before are positioned correctly
+  }
   @media (min-width: @screen-sm-min) {
     margin-bottom: -(@grid-gutter-width / 2);
     margin-top: -(@grid-gutter-width / 2);
@@ -85,9 +88,6 @@
     _::-webkit-full-page-media, _:future, :root & { // only target Safari
       .scroll-shadows-vertical-with-covers(65%, 0.25);
     }
-    .form-horizontal .control-label {
-      padding-right: 0;
-    }
   }
   h3 {
     line-height: 1.4;
diff --git a/dist/less/overlay-panel.less b/dist/less/overlay-panel.less
index 5cc1f882..57d7cdd2 100644
--- a/dist/less/overlay-panel.less
+++ b/dist/less/overlay-panel.less
@@ -58,9 +58,7 @@ body.overlay-open {
     @media (min-width: @screen-sm-min) {
       min-height: 100%;
       padding: (@grid-gutter-width / 2) @grid-gutter-width (@grid-gutter-width / 2) (@grid-gutter-width / 2);
-      .form-horizontal .control-label {
-        padding-right: 0;
-      }
+      position: relative; // so label.required:before are positioned correctly
       .scroll-shadows-vertical-covers();
       _::-webkit-full-page-media, _:future, :root & { // only target Safari
         background: none;
diff --git a/dist/origin-web-catalogs.css b/dist/origin-web-catalogs.css
index 48d32a3d..e50ec547 100644
--- a/dist/origin-web-catalogs.css
+++ b/dist/origin-web-catalogs.css
@@ -294,6 +294,11 @@
 .order-service-config {
   padding: 0 20px;
 }
+@media (max-width: 767px) {
+  .order-service-config {
+    position: relative;
+  }
+}
 @media (min-width: 768px) {
   .order-service-config {
     margin-bottom: -20px;
@@ -316,9 +321,6 @@
     background-repeat: no-repeat;
     background-size: 100% 12px, 100% 12px, 100% 6px, 100% 6px;
   }
-  .order-service-config .form-horizontal .control-label {
-    padding-right: 0;
-  }
 }
 .order-service-config h3 {
   line-height: 1.4;
@@ -481,15 +483,13 @@ body.overlay-open .landing-side-bar {
   .catalogs-overlay-panel .wizard-pf-main-form-contents {
     min-height: 100%;
     padding: 20px 40px 20px 20px;
+    position: relative;
     background-attachment: local;
     background-image: linear-gradient(#ffffff 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), #ffffff 70%);
     background-position: 0 0, 0 100%;
     background-repeat: no-repeat;
     background-size: 100% 12px;
   }
-  .catalogs-overlay-panel .wizard-pf-main-form-contents .form-horizontal .control-label {
-    padding-right: 0;
-  }
   .catalogs-overlay-panel .wizard-pf-main-form-contents _::-webkit-full-page-media,
   .catalogs-overlay-panel .wizard-pf-main-form-contents _:future,
   :root .catalogs-overlay-panel .wizard-pf-main-form-contents {
diff --git a/dist/origin-web-catalogs.js b/dist/origin-web-catalogs.js
index aac21aaf..5eaa70c4 100644
--- a/dist/origin-web-catalogs.js
+++ b/dist/origin-web-catalogs.js
@@ -24,13 +24,13 @@ webpackJsonp([ 0, 1 ], [ function(e, t) {
 }, function(e, t) {
     e.exports = '<bind-application-form application-name=\'$ctrl.imageStream.name\'\n                       form-name=\'$ctrl.bindForm\'\n                       allow-no-binding="true"\n                       service-instances="$ctrl.serviceInstances"\n                       service-to-bind="$ctrl.serviceToBind">\n</bind-application-form>\n';
 }, function(e, t) {
-    e.exports = '<div class="config-top">\n  <form name="$ctrl.builderForm" class="form-horizontal config-form">\n    <div class="form-group">\n      <label class="col-sm-4 control-label" for="version">Version</label>\n      <div class="col-sm-8">\n        <ui-select ng-model="$ctrl.istag" required search-enabled="false">\n          <ui-select-match>\n            {{$select.selected.name}}\n          </ui-select-match>\n          <ui-select-choices repeat="tag in $ctrl.versions track by tag.name">\n            {{tag.name}}\n            <small ng-repeat="otherTag in $ctrl.referencedBy[tag.name]">\n              <span ng-if="$first"> &mdash; </span>{{otherTag}}<span ng-if="!$last">,</span>\n            </small>\n          </ui-select-choices>\n        </ui-select>\n      </div>\n    </div>\n    <select-project selected-project="$ctrl.selectedProject" name-taken="$ctrl.projectNameTaken"></select-project>\n    <div class="form-group">\n      <label class="col-sm-4 control-label required" for="app-name">Application Name</label>\n      <div class="col-sm-8" ng-class="{ \'has-error\': $ctrl.builderForm.name.$touched && $ctrl.builderForm.name.$invalid }">\n        <input\n          class="form-control"\n          type="text"\n          id="app-name"\n          required\n          minlength="2"\n          ng-maxlength="$ctrl.nameMaxLength"\n          ng-pattern="$ctrl.namePattern"\n          ng-model="$ctrl.name"\n          name="name"\n          autocorrect="off"\n          autocapitalize="off"\n          spellcheck="false">\n        \x3c!-- Wait until users leave the field to avoid flashing errors as they type. --\x3e\n        <div ng-if="$ctrl.builderForm.name.$touched">\n          <div class="has-error" ng-show="$ctrl.builderForm.name.$error.required">\n            <span class="help-block">\n              Application name is required.\n            </span>\n          </div>\n          <div class="has-error" ng-show="$ctrl.builderForm.name.$error.pattern">\n            <span class="help-block">\n              Application name consists of lower-case letters, numbers, and dashes. It must start with a letter and can\'t end with a <code>-</code>.\n            </span>\n          </div>\n          <div class="has-error" ng-show="$ctrl.builderForm.name.$error.minlength">\n            <span class="help-block">\n              Application name must be at least 2 characters.\n            </span>\n          </div>\n          <div class="has-error" ng-show="$ctrl.builderForm.name.$error.maxlength">\n            <span class="help-block">\n              Application name can\'t be more than 24 characters.\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class="form-group">\n      <label class="col-sm-4 control-label required" for="repository">Git Repository</label>\n      <div class="col-sm-8" ng-class="{ \'has-error\': $ctrl.builderForm.repository.$touched && $ctrl.builderForm.repository.$error.$required }">\n        <input class="form-control"\n          type="text"\n          id="repository"\n          name="repository"\n          required\n          ng-model="$ctrl.repository"\n          autocorrect="off"\n          autocapitalize="off"\n          spellcheck="false">\n        <div ng-if="$ctrl.istag.annotations.sampleRepo" class="help-block">\n          <a href="" ng-click="$ctrl.fillSampleRepo()">Try Sample Repository\n            <i class="fa fa-level-up" aria-hidden="true"></i></a>\n        </div>\n        <div class="has-error" ng-if="$ctrl.builderForm.repository.$touched && $ctrl.builderForm.repository.$error.$required">\n          <span class="help-block">\n            Git repository is required.\n          </span>\n        </div>\n        <div class="has-warning" ng-if="$ctrl.builderForm.repository.$touched && $ctrl.repository && !$ctrl.repositoryPattern.test($ctrl.repository)">\n          <span class="help-block">\n            This might not be a valid Git URL. Check that it is the correct URL to a remote Git repository.\n          </span>\n        </div>\n      </div>\n    </div>\n\n    \x3c!--\n      Only show the link for existing projects. It will be broken for new\n      projects.  Use class `invisible` when the project list is still loading\n      so the dialog doesn\'t resize.\n    --\x3e\n    <div ng-hide="$ctrl.selectedProject && !$ctrl.selectedProject.metadata.uid"\n         ng-class="{ invisible: !$ctrl.selectedProject || !$ctrl.istag }"\n         class="form-group">\n      <div class="col-sm-8 col-sm-offset-4">\n        If you have a private Git repository or need to change application defaults, view\n        <a href="" ng-click="$ctrl.navigateToAdvancedForm()">advanced options</a>.\n      </div>\n    </div>\n  </form>\n</div>\n';
+    e.exports = '<div class="config-top">\n  <form name="$ctrl.builderForm" class="config-form">\n    <div class="form-group">\n      <label class="control-label" for="version">Version</label>\n      <ui-select ng-model="$ctrl.istag" required search-enabled="false">\n        <ui-select-match>\n          {{$select.selected.name}}\n        </ui-select-match>\n        <ui-select-choices repeat="tag in $ctrl.versions track by tag.name">\n          {{tag.name}}\n          <small ng-repeat="otherTag in $ctrl.referencedBy[tag.name]">\n            <span ng-if="$first"> &mdash; </span>{{otherTag}}<span ng-if="!$last">,</span>\n          </small>\n        </ui-select-choices>\n      </ui-select>\n    </div>\n    <select-project selected-project="$ctrl.selectedProject" name-taken="$ctrl.projectNameTaken"></select-project>\n    <div class="form-group">\n      <label class="control-label required" for="app-name">Application Name</label>\n      <div ng-class="{ \'has-error\': $ctrl.builderForm.name.$touched && $ctrl.builderForm.name.$invalid }">\n        <input\n          class="form-control"\n          type="text"\n          id="app-name"\n          required\n          minlength="2"\n          ng-maxlength="$ctrl.nameMaxLength"\n          ng-pattern="$ctrl.namePattern"\n          ng-model="$ctrl.name"\n          name="name"\n          autocorrect="off"\n          autocapitalize="off"\n          spellcheck="false">\n        \x3c!-- Wait until users leave the field to avoid flashing errors as they type. --\x3e\n        <div ng-if="$ctrl.builderForm.name.$touched">\n          <div class="has-error" ng-show="$ctrl.builderForm.name.$error.required">\n            <span class="help-block">\n              Application name is required.\n            </span>\n          </div>\n          <div class="has-error" ng-show="$ctrl.builderForm.name.$error.pattern">\n            <span class="help-block">\n              Application name consists of lower-case letters, numbers, and dashes. It must start with a letter and can\'t end with a <code>-</code>.\n            </span>\n          </div>\n          <div class="has-error" ng-show="$ctrl.builderForm.name.$error.minlength">\n            <span class="help-block">\n              Application name must be at least 2 characters.\n            </span>\n          </div>\n          <div class="has-error" ng-show="$ctrl.builderForm.name.$error.maxlength">\n            <span class="help-block">\n              Application name can\'t be more than 24 characters.\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class="form-group">\n      <label class="control-label required" for="repository">Git Repository</label>\n      <div ng-class="{ \'has-error\': $ctrl.builderForm.repository.$touched && $ctrl.builderForm.repository.$error.$required }">\n        <input class="form-control"\n          type="text"\n          id="repository"\n          name="repository"\n          required\n          ng-model="$ctrl.repository"\n          autocorrect="off"\n          autocapitalize="off"\n          spellcheck="false">\n        <div ng-if="$ctrl.istag.annotations.sampleRepo" class="help-block">\n          <a href="" ng-click="$ctrl.fillSampleRepo()">Try Sample Repository\n            <i class="fa fa-level-up" aria-hidden="true"></i></a>\n        </div>\n        <div class="has-error" ng-if="$ctrl.builderForm.repository.$touched && $ctrl.builderForm.repository.$error.$required">\n          <span class="help-block">\n            Git repository is required.\n          </span>\n        </div>\n        <div class="has-warning" ng-if="$ctrl.builderForm.repository.$touched && $ctrl.repository && !$ctrl.repositoryPattern.test($ctrl.repository)">\n          <span class="help-block">\n            This might not be a valid Git URL. Check that it is the correct URL to a remote Git repository.\n          </span>\n        </div>\n      </div>\n    </div>\n\n    \x3c!--\n      Only show the link for existing projects. It will be broken for new\n      projects.  Use class `invisible` when the project list is still loading\n      so the dialog doesn\'t resize.\n    --\x3e\n    <div ng-hide="$ctrl.selectedProject && !$ctrl.selectedProject.metadata.uid"\n         ng-class="{ invisible: !$ctrl.selectedProject || !$ctrl.istag }"\n         class="form-group">\n      If you have a private Git repository or need to change application defaults, view\n      <a href="" ng-click="$ctrl.navigateToAdvancedForm()">advanced options</a>.\n    </div>\n  </form>\n</div>\n';
 }, function(e, t) {
     e.exports = '<div ng-if="!$ctrl.success && !$ctrl.error">\n  <div ng-if="!$ctrl.serviceToBind">\n    <h3 class="text-center">\n      <div class="spinner spinner-lg" aria-hidden="true"></div>\n    </h3>\n    <h3 class="text-center">\n      <span>The application is being created</span>\n    </h3>\n  </div>\n  <div ng-if="$ctrl.serviceToBind" class="review-status">\n    <div class="spinner spinner-sm spinner-inline aria-hidden="true"></div>\n    <h3 class="review-message">\n      The application is being created\n    </h3>\n  </div>\n</div>\n<div ng-if="$ctrl.success">\n  <div class="review-status">\n    <span class="pficon pficon-ok" aria-hidden="true"></span>\n    <span class="sr-only">Success</span>\n    <h3 class="review-message">\n    <span>\n      <strong>{{$ctrl.name}}</strong> has been created in <strong>{{$ctrl.selectedProject.metadata.name}}</strong> successfully\n    </span>\n    </h3>\n  </div>\n</div>\n<div ng-if="!$ctrl.error && ($ctrl.bindInProgress || $ctrl.bindComplete)">\n  <bind-results error="$ctrl.bindError"\n                progress-inline="true"\n                binding="$ctrl.binding"\n                service-to-bind="$ctrl.serviceToBind"\n                application-to-bind="$ctrl.name"\n                show-pod-presets="$ctrl.showPodPresets">\n  </bind-results>\n</div>\n<div ng-if="$ctrl.success">\n  <p ng-if="!$ctrl.serviceToBind || $ctrl.bindComplete">\n    Continue to your project to check the status of your application as it builds and deploys.\n  </p>\n</div>\n<div class="review-failure" ng-if="$ctrl.error">\n  <div class="review-status">\n    <span class="pficon pficon-error-circle-o text-danger" aria-hidden="true"></span>\n    <span class="sr-only">Error</span>\n    <h3 class="review-message">\n      Order Failed\n    </h3>\n  </div>\n  <div class="sub-title">\n    <span ng-if="$ctrl.error.data.message">\n      {{$ctrl.error.data.message | upperFirst}}\n    </span>\n    <span ng-if="!$ctrl.error.data.message">\n      An error occurred creating the application.\n    </span>\n  </div>\n  \x3c!-- TODO: Improve error message presentation --\x3e\n  <ul ng-if="$ctrl.error.failure.length" class="failure-messages">\n    <li ng-repeat="failure in $ctrl.error.failure">\n      {{failure.data.message}}\n    </li>\n  </ul>\n</div>\n<div class="footer-panel">\n  <a class="btn btn-primary" href="{{$ctrl.selectedProject | projectUrl : $ctrl.baseProjectUrl}}">View Project</a>\n</div>\n';
 }, function(e, t) {
     e.exports = '<bind-service-form service-class="$ctrl.serviceClass.resource"\n                   service-class-name="$ctrl.serviceClass.name"\n                   form-name="$ctrl.forms.bindForm"\n                   applications="$ctrl.applications"\n                   allow-no-binding="true"\n                   create-binding="$ctrl.createBinding"\n                   app-to-bind="$ctrl.appToBind"\n                   should-bind-to-app="$ctrl.shouldBindToApp"\n                   group-by-kind="$ctrl.groupByKind">\n</bind-service-form>\n';
 }, function(e, t) {
-    e.exports = '<div class="config-top">\n  <form name="$ctrl.forms.orderConfigureForm" class="form-horizontal config-form">\n    <select-project selected-project="$ctrl.selectedProject" name-taken="$ctrl.nameTaken"></select-project>\n    \x3c!-- TODO: add parameters --\x3e\n    \x3c!-- <div class="form-group"> --\x3e\n    \x3c!--   <label class="col-sm-4 control-label" for="field1">Field 1</label> --\x3e\n    \x3c!--   <div class="col-sm-8"> --\x3e\n    \x3c!--     <input class="form-control" type="text" id="field1"> --\x3e\n    \x3c!--   </div> --\x3e\n    \x3c!-- </div> --\x3e\n  </form>\n  <div ng-if="$ctrl.error" class="col-sm-12 has-error">\n    <span class="help-block">{{$ctrl.error}}</span>\n  </div>\n</div>\n';
+    e.exports = '<div class="config-top">\n  <form name="$ctrl.forms.orderConfigureForm" class="config-form">\n    <select-project selected-project="$ctrl.selectedProject" name-taken="$ctrl.nameTaken"></select-project>\n    \x3c!-- TODO: add parameters --\x3e\n    \x3c!-- <div class="form-group"> --\x3e\n    \x3c!--   <label class="col-sm-4 control-label" for="field1">Field 1</label> --\x3e\n    \x3c!--   <div class="col-sm-8"> --\x3e\n    \x3c!--     <input class="form-control" type="text" id="field1"> --\x3e\n    \x3c!--   </div> --\x3e\n    \x3c!-- </div> --\x3e\n  </form>\n  <div ng-if="$ctrl.error" class="has-error">\n    <span class="help-block">{{$ctrl.error}}</span>\n  </div>\n</div>\n';
 }, function(e, t) {
     e.exports = '<div class="config-top">\n  <div class="select-plans">\n    <h3>Select a Plan</h3>\n    <div ng-repeat="plan in $ctrl.serviceClass.resource.plans" class="radio">\n      <label>\n        <input\n          type="radio"\n          ng-model="$ctrl.planIndex"\n          ng-change="$ctrl.selectPlan(plan)"\n          value="{{$index}}">\n        <span class="plan-name">{{plan.osbMetadata.displayName || plan.name}}</span>\n        \x3c!-- TODO: truncate long text --\x3e\n        <div ng-if="plan.description">{{plan.description}}</div>\n        \x3c!-- TODO: show plan bullets --\x3e\n      </label>\n    </div>\n  </div>\n</div>\n';
 }, function(e, t) {
@@ -793,7 +793,7 @@ webpackJsonp([ 0, 1 ], [ function(e, t) {
 }, function(e, t) {
     e.exports = '<span ng-if="$ctrl.hasSaasOfferings()" class="saas-offerings-container">\n  <h1 ng-if="$ctrl.saasTitle">{{$ctrl.saasTitle}}</h1>\n  <div class="saas-list" ng-class="{\'expanded\': $ctrl.sassListExpanded, \'items-overflow\': $ctrl.itemsOverflow}" items="$ctrl.saasOfferings">\n    <div class="card" ng-repeat="item in $ctrl.saasOfferings">\n      <a ng-href="{{item.url}}" target="_blank" class="card-content">\n        <div class="card-icon">\n          <img ng-if="item.image" ng-src="{{item.image}}" alt="">\n          <span ng-if="!item.image" class="icon {{item.icon}}" aria-hidden="true"></span>\n        </div>\n        <div class="card-title">{{item.title}}</div>\n        <truncate-long-text\n                class="card-description hidden-xs"\n                content="item.description"\n                limit="120"\n                use-word-boundary="true">\n        </truncate-long-text>\n      </a>\n    </div>\n  </div>\n  <div ng-if="$ctrl.itemsOverflow" class="sass-list-expander-container">\n    <a href="" class="sass-list-expander" ng-class="{\'expanded\': $ctrl.sassListExpanded}" ng-click="$ctrl.toggleListExpand()">\n      <span ng-if="!$ctrl.sassListExpanded">Show More</span>\n      <span ng-if="$ctrl.sassListExpanded">Show Less</span>\n    </a>\n  </div>\n</span>\n';
 }, function(e, t) {
-    e.exports = '<ng-form>\n    <div class="form-group">\n        <label class="col-sm-4 control-label" for="project">Add to Project</label>\n      <div class="col-sm-8">\n        <ui-select ng-model="$ctrl.selectedProject">\n          <ui-select-match>\n            {{$select.selected | displayName}}\n          </ui-select-match>\n          <ui-select-choices repeat="project in $ctrl.projects | searchProjects : $select.search track by (project | uid)">\n            <span ng-bind-html="project | displayName | highlightKeywords : $select.search"></span>\n                <span ng-if="project | displayName : true" class="small text-muted">\n                  <span ng-if="project.metadata.name">&ndash;</span>\n                  <span ng-bind-html="project.metadata.name | highlightKeywords : $select.search"></span>\n                </span>\n          </ui-select-choices>\n        </ui-select>\n      </div>\n    </div>\n</ng-form>\n\n<ng-form name="$ctrl.forms.createProjectForm"\n    ng-if="$ctrl.isNewProject()">\n  <div class="form-group">\n    <label for="name" class="col-sm-4 control-label required">Project Name</label>\n    <div class="col-sm-8" ng-class="{\'has-error\': ($ctrl.forms.createProjectForm.name.$error.pattern && $ctrl.forms.createProjectForm.name.$touched) || $ctrl.nameTaken}">\n      <input class="form-control"\n          name="name"\n          id="name"\n          placeholder="my-project"\n          type="text"\n          required\n          take-focus\n          minlength="2"\n          maxlength="63"\n          pattern="[a-z0-9]([-a-z0-9]*[a-z0-9])?"\n          aria-describedby="nameHelp"\n          ng-model="$ctrl.selectedProject.metadata.name"\n          osc-unique="$ctrl.existingProjectNames"\n          ng-model-options="{ updateOn: \'default blur\' }"\n          ng-change="$ctrl.onNewProjectNameChange()"\n          autocorrect="off"\n          autocapitalize="off"\n          spellcheck="false">\n      <div class="help-block">A unique name for the project.</div>\n      <div class="has-error" ng-if="$ctrl.forms.createProjectForm.name.$error.minlength && $ctrl.forms.createProjectForm.name.$touched">\n        <span id="nameHelp" class="help-block">\n          Name must have at least two characters.\n        </span>\n      </div>\n      <div class="has-error" ng-if="$ctrl.forms.createProjectForm.name.$error.pattern && $ctrl.forms.createProjectForm.name.$touched">\n        <span id="nameHelp" class="help-block">\n          Project names may only contain lower-case letters, numbers, and dashes.\n          They may not start or end with a dash.\n        </span>\n      </div>\n      <div class="has-error" ng-if="$ctrl.nameTaken || $ctrl.forms.createProjectForm.name.$error.oscUnique">\n        <span class="help-block">\n          This name is already in use. Please choose a different name.\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <div class="form-group">\n    <label for="displayName" class="col-sm-4 control-label">Project Display Name</label>\n    <div class="col-sm-8">\n      <input class="form-control"\n        name="displayName"\n        id="displayName"\n        placeholder="My Project"\n        type="text"\n        ng-model="$ctrl.selectedProject.metadata.annotations[\'new-display-name\']">\n    </div>\n  </div>\n\n  <div class="form-group">\n    <label for="description" class="col-sm-4 control-label">Project Description</label>\n    <div class="col-sm-8">\n      <textarea class="form-control"\n        name="description"\n        id="description"\n        placeholder="A short description."\n        ng-model="$ctrl.selectedProject.metadata.annotations[\'openshift.io/description\']"></textarea>\n    </div>\n  </div>\n</ng-form>\n';
+    e.exports = '<ng-form>\n  <div class="form-group">\n    <label class="control-label" for="project">Add to Project</label>\n    <ui-select ng-model="$ctrl.selectedProject">\n      <ui-select-match>\n        {{$select.selected | displayName}}\n      </ui-select-match>\n      <ui-select-choices repeat="project in $ctrl.projects | searchProjects : $select.search track by (project | uid)">\n        <span ng-bind-html="project | displayName | highlightKeywords : $select.search"></span>\n        <span ng-if="project | displayName : true" class="small text-muted">\n          <span ng-if="project.metadata.name">&ndash;</span>\n          <span ng-bind-html="project.metadata.name | highlightKeywords : $select.search"></span>\n        </span>\n      </ui-select-choices>\n    </ui-select>\n  </div>\n</ng-form>\n\n<ng-form name="$ctrl.forms.createProjectForm"\n    ng-if="$ctrl.isNewProject()">\n  <div class="form-group">\n    <label for="name" class="control-label required">Project Name</label>\n    <div ng-class="{\'has-error\': ($ctrl.forms.createProjectForm.name.$error.pattern && $ctrl.forms.createProjectForm.name.$touched) || $ctrl.nameTaken}">\n      <input class="form-control"\n          name="name"\n          id="name"\n          placeholder="my-project"\n          type="text"\n          required\n          take-focus\n          minlength="2"\n          maxlength="63"\n          pattern="[a-z0-9]([-a-z0-9]*[a-z0-9])?"\n          aria-describedby="nameHelp"\n          ng-model="$ctrl.selectedProject.metadata.name"\n          osc-unique="$ctrl.existingProjectNames"\n          ng-model-options="{ updateOn: \'default blur\' }"\n          ng-change="$ctrl.onNewProjectNameChange()"\n          autocorrect="off"\n          autocapitalize="off"\n          spellcheck="false">\n      <div class="help-block">A unique name for the project.</div>\n      <div class="has-error" ng-if="$ctrl.forms.createProjectForm.name.$error.minlength && $ctrl.forms.createProjectForm.name.$touched">\n        <span id="nameHelp" class="help-block">\n          Name must have at least two characters.\n        </span>\n      </div>\n      <div class="has-error" ng-if="$ctrl.forms.createProjectForm.name.$error.pattern && $ctrl.forms.createProjectForm.name.$touched">\n        <span id="nameHelp" class="help-block">\n          Project names may only contain lower-case letters, numbers, and dashes.\n          They may not start or end with a dash.\n        </span>\n      </div>\n      <div class="has-error" ng-if="$ctrl.nameTaken || $ctrl.forms.createProjectForm.name.$error.oscUnique">\n        <span class="help-block">\n          This name is already in use. Please choose a different name.\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <div class="form-group">\n    <label for="displayName" class="control-label">Project Display Name</label>\n    <input class="form-control"\n      name="displayName"\n      id="displayName"\n      placeholder="My Project"\n      type="text"\n      ng-model="$ctrl.selectedProject.metadata.annotations[\'new-display-name\']">\n  </div>\n\n  <div class="form-group">\n    <label for="description" class="control-label">Project Description</label>\n    <textarea class="form-control"\n      name="description"\n      id="description"\n      placeholder="A short description."\n      ng-model="$ctrl.selectedProject.metadata.annotations[\'openshift.io/description\']"></textarea>\n  </div>\n</ng-form>\n';
 }, function(e, t) {
     e.exports = '<div class="services-view">\n  <div ng-if="!$ctrl.loaded" class="spinner-container">\n    <div class="spinner spinner-xl"></div>\n  </div>\n  <div ng-if="$ctrl.loaded" class="services-view-container">\n    <h1>Browse Catalog</h1>\n\n    <ul class="nav nav-tabs nav-tabs-pf">\n      <li ng-repeat="category in $ctrl.categories"\n          ng-if="category.hasItems"\n          ng-class="{\'active\': $ctrl.currentFilter === category.id}">\n        <a href="" id="{{\'category-\'+category.id}}" ng-click="$ctrl.filterByCategory(category.id, \'all\', true)">{{category.label}}</a>\n      </li>\n    </ul>\n\n    \x3c!-- Do not show sub-category items for \'All\' or \'Other\' main categories --\x3e\n\n    <div class="services-sub-categories" ng-if="$ctrl.currentFilter !== \'other\' && $ctrl.currentFilter !== \'all\'">\n      <div ng-repeat="subCategory in $ctrl.subCategories"\n           ng-if="subCategory.hasItems"\n           class="services-sub-category" ng-class="{\'active\': $ctrl.currentSubFilter === subCategory.id}">\n        <a href=""  id="{{\'services-sub-category-\'+subCategory.id}}"\n           class="services-sub-category-tab" ng-click="$ctrl.selectSubCategory(subCategory.id)">\n          <div class="services-sub-category-tab-image" ng-if="subCategory.imageUrl">\n            <img ng-src="{{subCategory.imageUrl}}" alt="">\n          </div>\n          <div class="services-sub-category-tab-icon {{subCategory.icon}}" ng-if="subCategory.icon && !subCategory.imageUrl"></div>\n          <div class="services-sub-category-tab-name">{{subCategory.label}}</div>\n        </a>\n        <div ng-if="$ctrl.currentSubFilter === subCategory.id" class="services-items">\n          <a href="" class="services-item" ng-repeat="item in $ctrl.filteredItems" ng-click="$ctrl.handleClick(item)">\n            <div ng-if="!item.imageUrl" class="services-item-icon">\n              <span class="{{item.iconClass}}"></span>\n            </div>\n            <div ng-if="item.imageUrl" class="services-item-icon">\n              <img ng-src="{{item.imageUrl}}" alt="">\n            </div>\n            <div class="services-item-name" title="{{item.name}}">\n              {{item.name}}\n            </div>\n          </a>\n        </div>\n      </div>\n    </div>\n\n    \x3c!-- Show catalog item for \'All\' and \'Other\' main categories --\x3e\n\n    <div ng-if="$ctrl.currentFilter === \'other\' || $ctrl.currentFilter === \'all\'" class="services-items">\n      <div ng-if="$ctrl.isEmpty">There are no catalog items.</div>\n      <a href="" class="services-item" ng-repeat="item in $ctrl.filteredItems" ng-click="$ctrl.handleClick(item)">\n        <div ng-if="!item.imageUrl" class="services-item-icon">\n          <span class="{{item.iconClass}}"></span>\n        </div>\n        <div ng-if="item.imageUrl" class="services-item-icon">\n          <img ng-src="{{item.imageUrl}}" alt="">\n        </div>\n        <div class="services-item-name" title="{{item.name}}">\n          {{item.name}}\n        </div>\n      </a>\n    </div>\n  </div>\n</div>\n';
 }, function(e, t, n) {
@@ -1255,7 +1255,7 @@ webpackJsonp([ 0, 1 ], [ function(e, t) {
     "use strict";
     t.__esModule = !0;
     var i = n(1), r = n(2), a = n(0), s = function() {
-        function e(e, t, n, r, s, o, c, l, d, p, m, h) {
+        function e(e, t, n, r, s, o, c, l, d, p, h, m) {
             var g = this;
             this.ctrl = this, this.showNewProjectPanel = !1, this.showEditProjectPanel = !1, 
             this.alerts = [], this.projects = [], this.watches = [], this.maxDisplayProjects = 5, 
@@ -1286,7 +1286,7 @@ webpackJsonp([ 0, 1 ], [ function(e, t) {
                 g.ctrl.showEditProjectPanel = !1, g.hideModalBackdrop();
             }, this.$element = e, this.$filter = t, this.$rootScope = n, this.$scope = r, this.AlertMessageService = s, 
             this.AuthService = o, this.Catalog = c, this.Constants = l, this.DataService = d, 
-            this.Logger = p, this.ProjectsService = m, this.RecentlyViewed = h;
+            this.Logger = p, this.ProjectsService = h, this.RecentlyViewed = m;
         }
         return e.prototype.$onInit = function() {
             var e = this;
@@ -1477,8 +1477,8 @@ webpackJsonp([ 0, 1 ], [ function(e, t) {
     t.__esModule = !0;
     var i = n(1);
     n(4), n(22);
-    var r = n(23), a = n(3), s = n(3), o = n(24), c = n(13), l = n(25), d = n(14), p = n(15), m = n(16), h = n(17), g = n(18), u = n(19), f = n(20), v = n(21), y = n(26);
-    t.webCatalog = "webCatalog", i.module(t.webCatalog, [ "patternfly", "ngAnimate", "ui.bootstrap", "angularMoment", "ui.select" ]).service("BuilderAppService", o.BuilderAppService).service("Catalog", l.CatalogService).service("RecentlyViewedServiceItems", y.RecentlyViewedServiceItems).filter("projectUrl", r.projectUrlFilter).filter("applicationHasDeployment", a.applicationHasDeploymentFilter).filter("applicationHasDeploymentConfig", s.applicationHasDeploymentConfigFilter).component("catalogSearch", c.catalogSearch).component("createFromBuilder", d.createFromBuilder).component("landingPage", p.landingPage).component("orderService", m.orderService).component("overlayPanel", h.overlayPanel).component("projectsSummary", g.projectsSummary).component("saasList", u.saasList).component("selectProject", f.selectProject).component("servicesView", v.servicesView).run([ "$templateCache", function(e) {
+    var r = n(23), a = n(3), s = n(3), o = n(24), c = n(13), l = n(25), d = n(14), p = n(15), h = n(16), m = n(17), g = n(18), u = n(19), f = n(20), v = n(21), y = n(26);
+    t.webCatalog = "webCatalog", i.module(t.webCatalog, [ "patternfly", "ngAnimate", "ui.bootstrap", "angularMoment", "ui.select" ]).service("BuilderAppService", o.BuilderAppService).service("Catalog", l.CatalogService).service("RecentlyViewedServiceItems", y.RecentlyViewedServiceItems).filter("projectUrl", r.projectUrlFilter).filter("applicationHasDeployment", a.applicationHasDeploymentFilter).filter("applicationHasDeploymentConfig", s.applicationHasDeploymentConfigFilter).component("catalogSearch", c.catalogSearch).component("createFromBuilder", d.createFromBuilder).component("landingPage", p.landingPage).component("orderService", h.orderService).component("overlayPanel", m.overlayPanel).component("projectsSummary", g.projectsSummary).component("saasList", u.saasList).component("selectProject", f.selectProject).component("servicesView", v.servicesView).run([ "$templateCache", function(e) {
         e.put("catalog-search/catalog-search-result.html", n(5)), e.put("create-from-builder/create-from-builder-configure.html", n(7)), 
         e.put("create-from-builder/create-from-builder-bind.html", n(6)), e.put("create-from-builder/create-from-builder-results.html", n(8)), 
         e.put("order-service/order-service-plans.html", n(11)), e.put("order-service/order-service-configure.html", n(10)), 
diff --git a/src/components/create-from-builder/create-from-builder-configure.html b/src/components/create-from-builder/create-from-builder-configure.html
index 1d80d843..8ce4819f 100644
--- a/src/components/create-from-builder/create-from-builder-configure.html
+++ b/src/components/create-from-builder/create-from-builder-configure.html
@@ -1,25 +1,23 @@
 <div class="config-top">
-  <form name="$ctrl.builderForm" class="form-horizontal config-form">
+  <form name="$ctrl.builderForm" class="config-form">
     <div class="form-group">
-      <label class="col-sm-4 control-label" for="version">Version</label>
-      <div class="col-sm-8">
-        <ui-select ng-model="$ctrl.istag" required search-enabled="false">
-          <ui-select-match>
-            {{$select.selected.name}}
-          </ui-select-match>
-          <ui-select-choices repeat="tag in $ctrl.versions track by tag.name">
-            {{tag.name}}
-            <small ng-repeat="otherTag in $ctrl.referencedBy[tag.name]">
-              <span ng-if="$first"> &mdash; </span>{{otherTag}}<span ng-if="!$last">,</span>
-            </small>
-          </ui-select-choices>
-        </ui-select>
-      </div>
+      <label class="control-label" for="version">Version</label>
+      <ui-select ng-model="$ctrl.istag" required search-enabled="false">
+        <ui-select-match>
+          {{$select.selected.name}}
+        </ui-select-match>
+        <ui-select-choices repeat="tag in $ctrl.versions track by tag.name">
+          {{tag.name}}
+          <small ng-repeat="otherTag in $ctrl.referencedBy[tag.name]">
+            <span ng-if="$first"> &mdash; </span>{{otherTag}}<span ng-if="!$last">,</span>
+          </small>
+        </ui-select-choices>
+      </ui-select>
     </div>
     <select-project selected-project="$ctrl.selectedProject" name-taken="$ctrl.projectNameTaken"></select-project>
     <div class="form-group">
-      <label class="col-sm-4 control-label required" for="app-name">Application Name</label>
-      <div class="col-sm-8" ng-class="{ 'has-error': $ctrl.builderForm.name.$touched && $ctrl.builderForm.name.$invalid }">
+      <label class="control-label required" for="app-name">Application Name</label>
+      <div ng-class="{ 'has-error': $ctrl.builderForm.name.$touched && $ctrl.builderForm.name.$invalid }">
         <input
           class="form-control"
           type="text"
@@ -60,8 +58,8 @@
     </div>
 
     <div class="form-group">
-      <label class="col-sm-4 control-label required" for="repository">Git Repository</label>
-      <div class="col-sm-8" ng-class="{ 'has-error': $ctrl.builderForm.repository.$touched && $ctrl.builderForm.repository.$error.$required }">
+      <label class="control-label required" for="repository">Git Repository</label>
+      <div ng-class="{ 'has-error': $ctrl.builderForm.repository.$touched && $ctrl.builderForm.repository.$error.$required }">
         <input class="form-control"
           type="text"
           id="repository"
@@ -96,10 +94,8 @@
     <div ng-hide="$ctrl.selectedProject && !$ctrl.selectedProject.metadata.uid"
          ng-class="{ invisible: !$ctrl.selectedProject || !$ctrl.istag }"
          class="form-group">
-      <div class="col-sm-8 col-sm-offset-4">
-        If you have a private Git repository or need to change application defaults, view
-        <a href="" ng-click="$ctrl.navigateToAdvancedForm()">advanced options</a>.
-      </div>
+      If you have a private Git repository or need to change application defaults, view
+      <a href="" ng-click="$ctrl.navigateToAdvancedForm()">advanced options</a>.
     </div>
   </form>
 </div>
diff --git a/src/components/order-service/order-service-configure.html b/src/components/order-service/order-service-configure.html
index 9d15b971..6623aff7 100644
--- a/src/components/order-service/order-service-configure.html
+++ b/src/components/order-service/order-service-configure.html
@@ -1,5 +1,5 @@
 <div class="config-top">
-  <form name="$ctrl.forms.orderConfigureForm" class="form-horizontal config-form">
+  <form name="$ctrl.forms.orderConfigureForm" class="config-form">
     <select-project selected-project="$ctrl.selectedProject" name-taken="$ctrl.nameTaken"></select-project>
     <!-- TODO: add parameters -->
     <!-- <div class="form-group"> -->
@@ -9,7 +9,7 @@
     <!--   </div> -->
     <!-- </div> -->
   </form>
-  <div ng-if="$ctrl.error" class="col-sm-12 has-error">
+  <div ng-if="$ctrl.error" class="has-error">
     <span class="help-block">{{$ctrl.error}}</span>
   </div>
 </div>
diff --git a/src/components/select-project/selectProject.html b/src/components/select-project/selectProject.html
index a62c2556..12a6b12c 100644
--- a/src/components/select-project/selectProject.html
+++ b/src/components/select-project/selectProject.html
@@ -1,28 +1,26 @@
 <ng-form>
-    <div class="form-group">
-        <label class="col-sm-4 control-label" for="project">Add to Project</label>
-      <div class="col-sm-8">
-        <ui-select ng-model="$ctrl.selectedProject">
-          <ui-select-match>
-            {{$select.selected | displayName}}
-          </ui-select-match>
-          <ui-select-choices repeat="project in $ctrl.projects | searchProjects : $select.search track by (project | uid)">
-            <span ng-bind-html="project | displayName | highlightKeywords : $select.search"></span>
-                <span ng-if="project | displayName : true" class="small text-muted">
-                  <span ng-if="project.metadata.name">&ndash;</span>
-                  <span ng-bind-html="project.metadata.name | highlightKeywords : $select.search"></span>
-                </span>
-          </ui-select-choices>
-        </ui-select>
-      </div>
-    </div>
+  <div class="form-group">
+    <label class="control-label" for="project">Add to Project</label>
+    <ui-select ng-model="$ctrl.selectedProject">
+      <ui-select-match>
+        {{$select.selected | displayName}}
+      </ui-select-match>
+      <ui-select-choices repeat="project in $ctrl.projects | searchProjects : $select.search track by (project | uid)">
+        <span ng-bind-html="project | displayName | highlightKeywords : $select.search"></span>
+        <span ng-if="project | displayName : true" class="small text-muted">
+          <span ng-if="project.metadata.name">&ndash;</span>
+          <span ng-bind-html="project.metadata.name | highlightKeywords : $select.search"></span>
+        </span>
+      </ui-select-choices>
+    </ui-select>
+  </div>
 </ng-form>
 
 <ng-form name="$ctrl.forms.createProjectForm"
     ng-if="$ctrl.isNewProject()">
   <div class="form-group">
-    <label for="name" class="col-sm-4 control-label required">Project Name</label>
-    <div class="col-sm-8" ng-class="{'has-error': ($ctrl.forms.createProjectForm.name.$error.pattern && $ctrl.forms.createProjectForm.name.$touched) || $ctrl.nameTaken}">
+    <label for="name" class="control-label required">Project Name</label>
+    <div ng-class="{'has-error': ($ctrl.forms.createProjectForm.name.$error.pattern && $ctrl.forms.createProjectForm.name.$touched) || $ctrl.nameTaken}">
       <input class="form-control"
           name="name"
           id="name"
@@ -62,25 +60,21 @@
   </div>
 
   <div class="form-group">
-    <label for="displayName" class="col-sm-4 control-label">Project Display Name</label>
-    <div class="col-sm-8">
-      <input class="form-control"
-        name="displayName"
-        id="displayName"
-        placeholder="My Project"
-        type="text"
-        ng-model="$ctrl.selectedProject.metadata.annotations['new-display-name']">
-    </div>
+    <label for="displayName" class="control-label">Project Display Name</label>
+    <input class="form-control"
+      name="displayName"
+      id="displayName"
+      placeholder="My Project"
+      type="text"
+      ng-model="$ctrl.selectedProject.metadata.annotations['new-display-name']">
   </div>
 
   <div class="form-group">
-    <label for="description" class="col-sm-4 control-label">Project Description</label>
-    <div class="col-sm-8">
-      <textarea class="form-control"
-        name="description"
-        id="description"
-        placeholder="A short description."
-        ng-model="$ctrl.selectedProject.metadata.annotations['openshift.io/description']"></textarea>
-    </div>
+    <label for="description" class="control-label">Project Description</label>
+    <textarea class="form-control"
+      name="description"
+      id="description"
+      placeholder="A short description."
+      ng-model="$ctrl.selectedProject.metadata.annotations['openshift.io/description']"></textarea>
   </div>
 </ng-form>
diff --git a/src/styles/order-service.less b/src/styles/order-service.less
index fd35204b..38650ace 100644
--- a/src/styles/order-service.less
+++ b/src/styles/order-service.less
@@ -75,6 +75,9 @@
 
 .order-service-config {
   padding: 0 (@grid-gutter-width / 2);
+  @media (max-width: @screen-xs-max) {
+    position: relative; // so label.required:before are positioned correctly
+  }
   @media (min-width: @screen-sm-min) {
     margin-bottom: -(@grid-gutter-width / 2);
     margin-top: -(@grid-gutter-width / 2);
@@ -85,9 +88,6 @@
     _::-webkit-full-page-media, _:future, :root & { // only target Safari
       .scroll-shadows-vertical-with-covers(65%, 0.25);
     }
-    .form-horizontal .control-label {
-      padding-right: 0;
-    }
   }
   h3 {
     line-height: 1.4;
diff --git a/src/styles/overlay-panel.less b/src/styles/overlay-panel.less
index 5cc1f882..57d7cdd2 100644
--- a/src/styles/overlay-panel.less
+++ b/src/styles/overlay-panel.less
@@ -58,9 +58,7 @@ body.overlay-open {
     @media (min-width: @screen-sm-min) {
       min-height: 100%;
       padding: (@grid-gutter-width / 2) @grid-gutter-width (@grid-gutter-width / 2) (@grid-gutter-width / 2);
-      .form-horizontal .control-label {
-        padding-right: 0;
-      }
+      position: relative; // so label.required:before are positioned correctly
       .scroll-shadows-vertical-covers();
       _::-webkit-full-page-media, _:future, :root & { // only target Safari
         background: none;