jenryb jenryb - 7 months ago 29
HTML Question

Bootstrap button not lining up with input field

I'm having trouble getting a

glyphicon-search
button to line up in bootstrap.
This is not a unique problem, I found this question that asks a similar thing, except the accepted and celebrated answer isn't working for me. Just like the answer, I have a div input group wrapper that should line up the field, but it isn't working, as you can see in my jsfiddle:

http://jsfiddle.net/pk84s94t/

<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default glyphicon glyphicon-search input-sm" type="submit"></button>
</span>
<input type="text" class="form-control input-sm">
</div>

Answer

http://jsfiddle.net/kv8n7n5g/

<div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button>
    </span>
    <input type="text" class="form-control" placeholder="Search">
</div>

You had the glyphicon classes inside the button tag.

If that doesn't work you may have to change the line-height of the icon to 1. I was using ionicons and the 1.4... line-height was throwing everything off.