form-horizontal and form-inline

by abuhamzah

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css">
<form class="form-horizontal">
  <div class="form-group">
    <label for="name" class="col-xs-2 control-label">Vehicle Name:</label>
    <div class="col-xs-4">
      <input type="text" class="form-control col-sm-10" name="name" placeholder="name" />
    </div>
  </div>

  <div class="form-group">
    <label for="name" class="col-xs-2 control-label">PTL Owning Location:</label>
    <div class="col-xs-4">
      <input type="text" class="form-control col-sm-10" name="name" placeholder="name" />
    </div>
  </div>



  <div class="form-group">
    <label for="birthday" class="col-xs-2 control-label">Repairing Location:</label>
    <div class="col-xs-10">
      <div class="form-inline">
        <div class="form-group">
          <select class="form-control ng-pristine ng-valid" ng-disabled="transFlag" ng-model="district">
            <option disabled="disabled" value="--None--">--None--</option>
            <!-- ngRepeat: (header, value) in districtList -->
            <option ng-repeat="(header, value) in districtList" value="2990" class="ng-binding ng-scope">2990-CAN Customer Owned</option>
            <!-- end ngRepeat: (header, value) in districtList -->
            <option ng-repeat="(header, value) in districtList" value="6990" class="ng-binding ng-scope">6990-US Customer Owned</option>
            <!-- end ngRepeat: (header, value) in districtList -->
            <option ng-repeat="(header, value) in districtList" value="6994" class="ng-binding ng-scope">6994-US PTL Owned</option>
            <!-- end ngRepeat: (header, value) in districtList -->
            <option ng-repeat="(header, value) in districtList" value="2994" class="ng-binding ng-scope">2994-CAN PTL Owned</option>
            <!-- end ngRepeat: (header, value) in districtList -->
          </select>
       ...

CSS

.form-inline .form-group {
  margin-left: 0;
  margin-right: 0;
}

.block-flat,
.block-wizard {
  margin-bottom: 40px;
  padding: 20px 20px;
  background: #fff;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  border-left: 1px solid #efefef;
  border-right: 1px solid #efefef;
  border-bottom: 1px solid #e2e2e2;
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.04);
}

.content {
  padding: 30px;
  padding-bottom: 5px;
}