CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
zer0
zer0

Reputation: 5017

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

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?

Upvotes: 0

Views: 3124

Answers (1)

Kathy
Kathy

Reputation: 305

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.

Upvotes: 1

Related Questions