Bootstrap button not lining up with input field

Question

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>

score 4 · Accepted Answer · edited Apr 18 '16 at 17:47

4

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.

edited Apr 18 '16 at 17:47

benomatis

5,536
7
36
59

answered Apr 18 '16 at 17:41

Rachel S

3,780
3
24
37

This worked, thank you for pointing that out. I'll accept in a few minutes when it lets me :) – jenryb Apr 18 '16 at 17:43

score 0 · Answer 2 · answered Apr 18 '16 at 17:40

That's interesting. I've never tried using a button with an input group like that, and I'm not sure why that behavior is occuring. Seems to be an easy fix though.

I added top:0 to the existing rule .input-group-btn>.btn which already had position: relative; ...

http://jsfiddle.net/pk84s94t/1/

EDIT

While this does fix the behavior, Rachel S's answer is a better solution as it's not changing CSS rules, but using proper HTML within bootstrap to fix the problem.

score 0 · Answer 3 · edited Apr 18 '16 at 18:44

The problem you are having is due to the glyphicon button default size in bootstrap. But if you put some text in the button it aligns perfectly as now the button for the text is given more priority than the glyphicon's default. For the text I used &nbsp. It works fine now.

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

Bootstrap button not lining up with input field

3 Answers3