## Here are three different ways to do it:

[![screenshot][screenshot]][fiddle-demo]

## [Here's a working Demo in Fiddle Of All Three][fiddle]

## Validation: 

You can use native bootstrap [validation states][validation states] (*No Custom CSS*!):

    <div class="form-group has-feedback">
        <label class="control-label" for="inputSuccess2">Name</label>
        <input type="text" class="form-control" id="inputSuccess2"/>
        <span class="glyphicon glyphicon-search form-control-feedback"></span>
    </div>

For a full discussion, see my answer to [Add a Bootstrap Glyphicon to Input Box][so inside]

## Input Group:

You can use the [**`.input-group`**][input-group] class like this:



    <div class="input-group">
        <input type="text" class="form-control"/>
        <span class="input-group-addon">
            <i class="fa fa-search"></i>
        </span>
    </div>

For a full discussion, see my answer to [adding Twitter Bootstrap icon to Input box][so outside]

## Unstyled Input Group:

You can still use [**`.input-group`**][input-group] for positioning but just override the default styling to make the two elements appear separate.

Use a normal input group but add the class `input-group-unstyled`:



<pre><code>&lt;div class=&quot;input-group <b>input-group-unstyled</b>&quot;&gt;
    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; /&gt;
    &lt;span class=&quot;input-group-addon&quot;&gt;
        &lt;i class=&quot;fa fa-search&quot;&gt;&lt;/i&gt;
    &lt;/span&gt;
&lt;/div&gt;
</code></pre>

Then change the styling with the following css:



    .input-group.input-group-unstyled input.form-control {
        -webkit-border-radius: 4px;
           -moz-border-radius: 4px;
                border-radius: 4px;
    }
    .input-group-unstyled .input-group-addon {
        border-radius: 4px;
        border: 0px;
        background-color: transparent;
    }

----

Also, these solutions work for [any input size](http://jsfiddle.net/KyleMit/eu9Lv/4/)

[validation states]: http://getbootstrap.com/css/#forms-control-validation
[input-group]: http://getbootstrap.com/components/#input-groups

[fiddle]: http://jsfiddle.net/KyleMit/eu9Lv
[fiddle-demo]: http://jsfiddle.net/KyleMit/eu9Lv/show/

[screenshot]: http://i.imgur.com/Srdjtzz.png

[so inside]: https://stackoverflow.com/a/18839305/1366033
[so outside]: https://stackoverflow.com/a/16875617/1366033

I am using bootstrap by default textbox taking full width of column and I want to  put search icon at the end to textbox.

My code is like this:



    <div class="container">
        <div class="row">
            <div class="form-group col-lg-4">
                <label class="control-label">Name</label>
                <input id="txtName" class="form-control input-sm" />
                <span class="glyphicon glyphicon-search"></span> 
            </div>
            <div class="col-lg-4"></div>
            <div class="col-lg-4"></div>
        </div>
    </div>

I don't want to use input group.

Please suggest an alternate way or alternate html with css.