Friday, May 20, 2016

#Bootstrap form with side-by-side controls



I have a form that has some controls that need to be side-by-side. All you need to do is wrap the controls in a div with class form-inline. This needs to go after the div with the column width class. Example:
<div class="form-group">
    <label class="col-md-2 control-label" for="">Start</label>
    <div class="col-md-10">
        <div class="form-inline">
            <input class="form-control"  type="text" id="eventStartDate">  <input class="form-control" type="text" id="eventStartTime">
        </div>
    </div>
</div>

Note: I highlighted the gap between to the side-by-side controls. That's because that space is actually rendered. I put one or two spaces, and you can notice the small gap on the image between the two controls. So watch out for that, because obviously space is not normally rendered like that.
Ref: http://stackoverflow.com/questions/18429121/inline-form-nested-within-horizontal-form-in-bootstrap-3 

No comments:

Post a Comment

There was an error in this gadget