Input elements in Bootstrap grid won't span across the entire width

Question

I have a Select input, and 2 text fields right next to each other in Bootstrap grid as follows

<div class="form-group form-group-lg error_container dob_container">
        <label for="field01" class="control-label column">Date of Birth</label>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="row">
                <div class="col-xs-5 remColPad removeRight">
                    <select id="field01" class="form-control input-lg col-sm-12">
                        <option value="">Month</option>
                        <option value="January">January</option>
                        <option value="February">February</option>
                        <option value="March">March</option>
                        <option value="April">April</option>
                    </select>
                </div>
                <div class="col-xs-3 remColPad">
                    <input id="day01" maxlength="2" type="text" name="day01" value="" class="form-control input-lg day_field col-sm-12" placeholder="DD" />
                </div>
                <div class="col-xs-4 remColPad">
                    <input id="year01" maxlength="4" type="text" name="year01" value="" class="form-control input-lg year_field col-sm-12" placeholder="YYYY"/>
                </div>
            </div>
        </div>
</div>

The issue is that, the input elements won't span across the entire width of the outer grid and there is always a gap on the right side. Especially in sm mode - where the elements are not clearly seen because of the gap. How can I fix this?

JSFiddle - http://jsfiddle.net/6ydh5mrj/

Gap

I think it might be because of the negative margin I'm putting in there to make the input elements stick to each other. If that is so, is there a workaround?

1

remove the -ve margins – Suraj Palwe Jun 15 '15 at 18:22

score 1 · Answer 1 · edited May 23 '17 at 12:13

I think your question has already been answered here.

I think part of the problem is that the width of an input element is determined by the "width" attribute for that element.

I don't think that setting "col-x2-12" inside "col-xs-4" is a good idea either. Generally, you only want to break rows/containers into columns with the Bootstrap grid, instead of breaking columns into columns. You can do break columns into columns, but it's cleaner and easier to keep track of issues if you don't. Adding the .container or .container-fluid class to the parent of .row will let the rows/columns know how to behave. Please read the Bootstrap documentation carefully.

You will also need classes to specify column widths for other devices - not all of the elements using predefined Bootstrap classes in your code (post or fiddle) have all widths specified.

The answer you linked to didn't help. I had to put `padding-left:0` instead of using negative margin. However, Thanks for your detailed answer on how to use bootstrap.. will keep that in mind. — zer0, Jun 15 '15 at 18:24

Input elements in Bootstrap grid won't span across the entire width

1 Answers1