Bootstrap input-group removes padding from col-XX-X

Question

I'm trying to create a form that includes an input-group. I use the 'col'-classes of bootstrap to style it, but when this is combined with the 'input-group'-class, the padding of the columns are removed.

I would like the date and name input-field to be aligned.

Here is my JSFiddle

HTML

<div class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 col-xs-2 control-label">Date</label>
        <div class="col-sm-4 col-xs-4 input-group">
            <input type="text" class="form-control" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 col-xs-2 control-label">Name</label>
        <div class="col-sm-4 col-xs-4">
            <input type="text" class="form-control" />
        </div>
    </div>
</div>
<br><br>
<div class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 col-xs-2 control-label">Date</label>
        <div class="col-sm-4 col-xs-4">
            <input type="text" class="form-control" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 col-xs-2 control-label">Name</label>
        <div class="col-sm-4 col-xs-4">
            <input type="text" class="form-control" />
        </div>
    </div>
</div>

Any help is appreciated!

You can use special classes to remove padding see this [post][1] [1]: stackoverflow.com/questions/19562903/… — DesignSnippet.com
do you use custom css? If so - just add the according rules so it would override Bootstrap. Other way is to customize your bootstrap. Also if it is a one time case you can add the rules inline ( would not recommend but it's an option) — Max Novich
@DesignSnippet.com yes I could do that, but would Bootstrap not have a solution for this? — Brammz
@MaksymStepanenko I don't use any custom css. I need it 5 times, so inline is possible, but preferably not. — Brammz

Alex Tartan Alex Tartan · Accepted Answer · 2015-05-26T12:42:00

The input-group class should not be combined with any other, as indicated in their examples (http://getbootstrap.com/components/#input-groups):

<div class="row">
    <div class="col-lg-6">
        <div class="input-group">
            [...]
        </div>
    </div>
</div>

Try this:

<div class="form-group">
    <label class="col-sm-2 col-xs-2 control-label">Date</label>
    <div class="col-sm-4 col-xs-4">
        <div class="input-group">
            <input type="text" class="form-control" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>

Bootstrap input-group removes padding from col-XX-X

1 Answers