CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
michaelmcgurk
michaelmcgurk

Reputation: 6511

Align labels & fields with Bootstrap form

I have the following simple form in Bootstrap but I am struggling to align everything correctly. How do I align the fields vertically with one another and so From & To are in line?

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
    
            <div class="col-md-12">
            <div class="span12">
                <div class="form-inline">
                    <label for="check-in">DATE RAISED FROM</label>
                    <input type="text" id="cid" name="fymd" class="span2 input-append date" placeholder="dd/mm/yyyy" />
                    <label for="check-out">TO</label>
                    <input type="text" id="cod" name="tymd" class="span2 input-append date" placeholder="dd/mm/yyyy" />
                </div>
            </div>
        </div>


        <div class="col-md-12">
            <div class="span12">
                <div class="form-inline">
                    <label for="check-in">COLLECTION DATE FROM</label>
                    <input type="text" id="cid" name="fymd" class="span2 input-append date" placeholder="dd/mm/yyyy" />
                    <label for="check-out">TO</label>
                    <input type="text" id="cod" name="tymd" class="span2 input-append date" placeholder="dd/mm/yyyy" />
                </div>
            </div>
        </div>

    
    </div>
</div>

You can see a DEMO here.

Upvotes: 0

Views: 41

Answers (1)

Wietse de Vries
Wietse de Vries

Reputation: 673

The width of the labels are dynamic, so unless they both have the exact same text, they wont line up. Play with bootstrap's grid to align them yourself:

<div class="row">
    <div class="col-xs-5">DATE RAISED FROM</div>
    <div class="col-xs-3">
        <input type="text" placeholder="dd/mm/yyyy" />
    </div>
    <div class="col-xs-1">TO</div>
    <div class="col-xs-3">
        <input type="text" placeholder="dd/mm/yyyy" />
    </div>
</div>

Check out this fiddle: https://jsfiddle.net/wietsedevries/sg0gbuem/1/

Upvotes: 1

Related Questions