CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Brammz
Brammz

Reputation: 389

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

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!

Upvotes: 3

Views: 5582

Answers (1)

Alex Tartan
Alex Tartan

Reputation: 6826

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>

Upvotes: 6

Related Questions