Twitter Bootstrap - input-group-addon alignment

Question

I am currently making a form, but if I add a input-group with input-group-addon, that input will become unaligned with the rest.

The addon seems to affect the width of the input.

Part of my code:

<div class="form-group">
    <label for="inputName" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-3">
        <input type="text" class="form-control" id="inputName" placeholder="Name" name="name" value="{{name}}" onblur="isEmpty(this)">
    </div>
</div>


<div class="form-group">
    <label for="inputLastSeen" class="col-sm-2 control-label">Last Seen</label>
    <div class="col-sm-3 input-group date form_datetime"
         data-link-field="inputLastSeen">
        <input type="text" class="form-control" value="" readonly>
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-th">
            </span>
        </span>
    </div>
    <input type="hidden" id="inputLastSeen" name="lastSeen" value="">
</div>

** I am using http://www.malot.fr/bootstrap-datetimepicker/demo.php for the DateTimePicker

Answer 1

Read the input group docs:

Don't mix with other components

Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.

(emphasis added)

So instead of:

<div class="col-sm-3 input-group">

You want:

<div class="col-sm-3">
    <div class="input-group">