Place icon inside submit button using Bootstrap 3

Question

I am trying to achieve the effect as shown in below screenshot using Bootstrap 3.

As you can see, the search button is both:

1) inside the input

2) styled with a glyphicon so as to not appear like a "button".

How can I achieve a similar effect with Bootstrap 3? I would like to place a button with a magnifying glass glyphicon at the end of a text input, however the button keeps appearing below the input as opposed to inside of it.

Answer 1

A wrapper div with position: relative; then positioning the submit button on top using position: absolute;. Like this:

http://jsfiddle.net/VtP5k/

HTML

<form>

    <div id="search">

        <input type="text" />
        <button type="sutmit">Search</button>

    </div>

</form>

CSS

#search {
    position: relative;
    width: 200px;
}

#search input {
    width: 194px;
}

#search button {
    position: absolute;
    top: 0;
    right: 0;
    margin: 3px 0;
}