CODEWITHSUNDEEP
csstwitter-bootstrap
AppleGrew
AppleGrew

Reputation: 9570

Bootstrap: Why do my input box and button have gap?

Please check my code at http://jsfiddle.net/TccN5/.

It has a gap between the input text box and the button on the right. For the very same markup on Bootstrap site the input box and the button has a nice tight fit with no gap.

Why do I have the gap?

My Version

Bootstrap Version

Upvotes: 1

Views: 2552

Answers (3)

Pete
Pete

Reputation: 2463

Use input-prepend and input-append

<div class="btn-group input-prepend input-append">
    <input type="button" class="btn" value="Prev">
    <input type="text" value="">
    <input type="button" class="btn" value="Next">
<div>

Upvotes: 0

Engineer
Engineer

Reputation: 48793

You have extra whitespace characters between button and input elements. Place button tag immediately after input element:

<input type="text" /><button class="btn" type="button">Any</button>

DEMO1

Or alternatively, apply this css styles:

​.input-append{
    font-size:0;
}​

DEMO2

Upvotes: 4

Eric Robinson
Eric Robinson

Reputation: 2095

Im not sure why that is, but this is how i fixed it. maybe you got some of your own css conflicting with the text field.

here's the jsfiddle with the fix http://jsfiddle.net/TccN5/2/

I just added 

     style="margin-right:-4px"

to your 

     <input type="text">

Upvotes: 0

Related Questions