Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 3 vertical form with one inline row of inputs

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 &amp; 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>
like image 781
gpcola Avatar asked Sep 10 '13 09:09

gpcola


1 Answers

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.

like image 168
Pier-Luc Gendreau Avatar answered Sep 25 '22 18:09

Pier-Luc Gendreau