Bootstrap 3 vertical form with one inline row of inputs
The following solution works perfectly with Bootstrap 3:
<form>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<label>First name</label>
<input type="text" class="form-control">
</div>
<div class="col-md-6">
<label>Last name</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="form-group">
<label>Address</label>
<input type="text" class="form-control">
</div>
</form>
This will display first and last name side by side with labels above the fields.
You are correct to think you can use form-inline
You want something like this:
<div class="row form-inline">
<fieldset>
<div class="col-md-12">
<label for="date">Date & Time</label>
</div>
<div class="form-group">
<input type="text" required="" class="form-control" placeholder="Enter a date" id="date" name="date">
</div>
<div class="form-group">
<label for="time">@</label>
</div>
<div class="form-group">
<input type="text" required="" class="form-control" placeholder="Enter a time" id="time" name="time">
</div>
</fieldset>
</div>