BG100 BG100 - 4 months ago 42
HTML Question

Bootstrap input group addon alignment problems

My input group addon doesn't line up with my input text box... what am I doing wrong?

<div class="form-group">
<label for="primary">Primary:</label>
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-earphone"></span>
<input maxlength="20" class="form-control" name="primary" id="primary" placeholder="Primary" type="text">
</div>
</div>


The above code renders this:

Miss-aligned addon

The addon is 1px lower than the text box, but I can't work out why!

http://www.bootply.com/iR1SvOyEGH

Answer

Try This One.

This problem comes in chrome..

just do some changes

<div class="form-group">

        <div class="col-md-12">
        <div class="col-md-1">
            <label for="primary">Primary:</label>
            </div>
            <div class="col-md-4">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
                    <input maxlength="20" class="form-control" name="primary" id="primary" placeholder="Primary" type="text">
                </div>
            </div>


            </div>
        </div>
Comments