Question

I’m trying to make some simple tweaks to my layout using twitter bootstrap, but using the ‘input-append’ class is bugging me. I’m sure the answer is very simple, but I’m new at this and I’ve been spending waaaay too long trying to find an answer.

I want the text input, the button and the End Text div on the same row, and I want the button appended to the text input.

Here is my jsfiddle: http://jsfiddle.net/kdavh/azF8w/2/

…Focusing on the div around the button:

<div class='span2'>
  <input class="btn btn-primary span2" type="submit" value="Search" />
</div>

If I change it to

<div class='span2 input-append'> ...

The button takes the right shape but is separated from the text input

If I take off the span2 and change it to

<div class='input-append'> ...

Then the button is appended correctly, but then the following ‘End Text’ block is pushed to the next line.

I’ll spare you all of the other permutations I’ve tried. I’ve searched but can not find a working example.

Can anyone help?

Answer 1

please try below code:

<div class='container'>
    <div class='row'>
        <form>
        <div class='span3 input-append'>
            <input class="span2" id="main_search" type="text" />
            <input class="btn btn-primary" type="button" value="Search" />
        </div>
        <div class='span2'>
            <a class='littleNote' href=''>End Text</a>
        </div>
        </form>
    </div>
</div>