0

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.

1
  • span12, span2, etc are not a part of Bootstrap v3 in case you're trying to use them in that way.
    – vanburen
    May 26, 2016 at 16:02

1 Answer 1

1

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/

2
  • Thanks for this :-) Is there a reason why it doesn't look so great on mobile? Should I be changing the xs to lg and then make it xs-12? May 26, 2016 at 15:43
  • 1
    yeah, that's better. 3 col width is too small for mobile. Or you could try 12 for the label and 5-2-5 for the input fields May 26, 2016 at 17:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.