Input groups bigger than input in Bootstrap 3 using Jumbotron container

Question

I\'m experimenting a strange behavior with Bootstrap 3 input groups. When I add an input-group-addon (text or icon) to a form inside a jumbotron, the input-group height is bigge

Answer 1

The main problem of .input-group-addon size within .jumbotron is that it inherits font-size of .jumbotron.

Usually, people are trying to change height, min-height or padding etc.

However the cause of different size is that .input-group in .jumbotron inherits "font-size: 21px;"

You should change the font-size of .input-group NOT .input-group-addon like below.

.input-group { font-size: 14px !important; }

Answer 2

I have just run across the same issue.

I fixed by modifying adrift's answer to :

<div class="input-group input-group-fix">
   <div class="input-group-prepend">
      <span class="input-group-text" id="inputlbl-field1">field1</span>
   </div>
   <input id="field1" type="text" class="form-control" aria-label="field1" aria-describedby="inputlbl-field1" data-toggle="tooltip" data-placement="top">
</div>

And then adding the following CSS

.input-group-fix > .form-control, .input-group-fix > .input-group-addon, .input-group-fix > .input-group-btn > .btn {
    height: 43px;
}

This gives me greater control on where I want to apply it.

Answer 3

Last night, I had exactly the same problem. None of the fixes mentioned above worked in my context. What finally did do the job was setting the margin to 0:

.input-group .form-control {
    margin: 0px !important;
}

Perhaps this helps someone with a similar problem!

Answer 4

Looking at Bootstrap's doc as Adrift suggests, your original code looks perfectly valid. Adding the input-group-lg class is great if you want LARGE but if you don't, it's wrong. Using IE9 and running your code in both my own dev environment and Adrift's jsfiddle, it's working correctly (for me) with and without the input-group-lg class, except of course that with it it's rendered large. Perhaps a browser specific issue??

That said, I'm experiencing a similar problem trying to add a radio button at the front of a selectpicker. Oh well...

Answer 5

I fixed it be adding id="search_button" to my button:

<div class="input-group input-group-lg">
    <input type="text" class="form-control" placeholder="Username"/>
    <span class="input-group-btn">
        <button id="search_button" class="btn btn-primary" type="button">GO</button>
    </span>
</div>

I then applied the following style to my button:

#search_button {
    width: 90px;
    margin: 0 auto;
    text-align: justify;
}

That's all.

Answer 6

The bootstrap solution is to add the input-group-lg class on the containing <div> - as shown in the documentation, but you'll notice the addon is still slightly larger than the input so you can just adjust the height of the <input> to match; I added 5 px:

http://jsfiddle.net/DTcHh/21/