Add Twitter Bootstrap icon to Input box

Question

How can we add a Twitter Bootstrap icon icon-search to the right of a text input element?

The following attempt placed all the icons inside the input el

Answer 1

Updated Bootstrap 3.x

You can use the .input-group class like this:

Working Demo in jsFiddle for 3.x

---

Bootstrap 2.x

You can use the .input-append class like this:

Working Demo in jsFiddle for 2.x

---

Both will look like this:

If you'd like the icon inside the input box, like this:

Then see my answer to Add a Bootstrap Glyphicon to Input Box