Inline form in one row with labels above input fields

Question

I'm building a web app using angularjs and bootstrap 3 as a css (I have very limited knowledge of css). I'd like to create an inline form with 5 input fields and labels to be positioned on top of them. First field needs to occupy more space than the others.

I have a plnkr with my attempt here: http://plnkr.co/edit/a2p7RNy2SueH82WoSg5e?p=preview

And here is the markup with what I tried:

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<form name="form" novalidate="" ng-submit="processForm()" class="form-inline">

  <div class="form-group col-md-4">
    <label class="control-label" for="location"><i class="glyphicon glyphicon-map-marker"></i> Location</label>
    <input class="form-control" id="location" name="location" type="text" ng-model="location" ng-required="true" ng-autocomplete details="details" options="options" placeholder="Location" />
  </div>
  <div class="form-group col-md-4">
    <label class="control-label" for="startDate"><i class="glyphicon glyphicon-calendar"></i> Pickup date</label>
    <input class="form-control" id="startDate" name="startDate" type="text" datepicker-popup="{{format}}" ng-model="startDate" is-open="openedStart" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-click="openStart($event)" />
  </div>
  <div class="form-group col-md-3">
    <label class="control-label" for="startTime"><i class="glyphicon glyphicon-time"></i> Pickup</label>
    <select class="form-control" id="startTime" ng-model="selectedStartTime" ng-options="time.label for time in times" ng-required="true">
    </select>
  </div>
  <div class="form-group col-md-4">
    <label class="control-label" for="endDate"><i class="glyphicon glyphicon-calendar"></i> Dropoff date</label>
    <input class="form-control" id="endDate" name="endDate" type="text" datepicker-popup="{{format}}" ng-model="endDate" is-open="openedEnd" min-date="startDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-click="openEnd($event)"
    />
  </div>
  <div class="form-group col-md-3">
    <label class="control-label" for="endTime"><i class="glyphicon glyphicon-time"></i> Dropoff</label>
    <select class="form-control" id="endTime" ng-model="selectedEndTime" ng-options="time.label for time in times" ng-required="true">
    </select>
  </div>
  <div class="row align-center">
    <input type="submit" value="Search" ng-disabled="form.$invalid" class="btn btn-primary" disabled="disabled" />
  </div>
</form>

This is how the current plnkr renders the markup:

Solution 1

Adding my comment as an answer, as I'm guessing it may be the solution.

You're using 4+4+3+4+3=18 columns. Limit these to span over a total of max 12. Decide which ones you can make smaller.

Solution 2

You only need to use the grid as intended, always keeping in mind the total sum of columns must be 12. So, in your example, you could use something like this. Note how I also grouped the similar areas of your form by offsetting the columns:

<div class="container">
<form name="form" novalidate="" ng-submit="processForm()" class="form-inline">
<div class="row">

  <div class="col-md-6">
  <label class="control-label" for="location"><i class="glyphicon glyphicon-map-marker"></i> Location</label>
    <input class="form-control" id="location" name="location" type="text" ng-model="location" ng-required="true" ng-autocomplete details="details" options="options" placeholder="Location" />
  </div>
  <div class="col-md-3">
  <label class="control-label" for="startDate"><i class="glyphicon glyphicon-calendar"></i> Pickup date</label>
    <input class="form-control" id="startDate" name="startDate" type="text" datepicker-popup="{{format}}" ng-model="startDate" is-open="openedStart" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-click="openStart($event)" />
  </div>
  <div class="col-md-3">
   <label class="control-label" for="startTime"><i class="glyphicon glyphicon-time"></i> Pickup</label>
    <select class="form-control" id="startTime" ng-model="selectedStartTime" ng-options="time.label for time in times" ng-required="true">
    </select>
  </div>

</div>
<div class="row">
  <div class="col-md-3 col-md-offset-6"><label class="control-label" for="endDate"><i class="glyphicon glyphicon-calendar"></i> Dropoff date</label>
    <input class="form-control" id="endDate" name="endDate" type="text" datepicker-popup="{{format}}" ng-model="endDate" is-open="openedEnd" min-date="startDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-click="openEnd($event)"
    /></div>
  <div class="col-md-3"> <label class="control-label" for="endTime"><i class="glyphicon glyphicon-time"></i> Dropoff</label>
    <select class="form-control" id="endTime" ng-model="selectedEndTime" ng-options="time.label for time in times" ng-required="true">
    </select></div>
  </div>
  <div class="row align-center">
    <input type="submit" value="Search" ng-disabled="form.$invalid" class="btn btn-primary" disabled="disabled" />
  </div>
  </form>
 </div>

Now some minimal CSS for spacing and to make sure all elements behave the same:

label{display:block}
.control-label{padding-top:20px}
.align-center{text-align:center; padding:20px}
#location.form-control{width:100%}

of course you can style it at will. You can see the result here

Comments

[JRulle]

Could you describe the issues you are having...I opened your Plunker link and didn't see any obvious issues in the result

[Mattias]

@Neman You're using 4+4+3+4+3=18 columns. Limit these to span over a total of max 12. Decide which ones you can make smaller.