How should I restructure the following markup such that the second row's inputs are inline with the label for time between them? I thought I might be able to use 'form-inline' on a div but it doesn't appear to apply the correct styling.
http://bootply.com/80058
<div class="well">
<form role="form">
<div class="row">
<fieldset>
<div class="form-group">
<div class="col-md-12">
<label for="address">To take me to</label>
<input type="text" name="address" id="address" class="form-control" placeholder="Enter a location" required>
</div>
</div>
</fieldset>
</div>
<div class="row">
<fieldset>
<div class="form-group">
<div class="col-md-12">
<label for="date">Date & Time</label>
<input type="text" name="date" id="date" placeholder="Enter a date" class="form-control" required>
<label for="time">@</label>
<input type="text" name="time" id="time" placeholder="Enter a time" class="form-control" required>
</div>
</div>
</fieldset>
</div>
</form>
</div>
What I want is to end up with
Take me to <Address> Date & Time <Date> @ <Time>
But in such as way as to have the date @ time row's inputs expand and contract responsively. It would be nice if they also acted like a col-md-n so that on smaller screens I end up with
Take me to <Address> Date & Time <Date> @ <Time>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With