Put search icon near textbox using bootstrap

Question

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.

Answer 1

Adding a class with a width of 90% to your input element and adding the following input-icon class to your span would achieve what you want I think.

.input { width: 90%; } .input-icon {     display: inline-block;     height: 22px;     width: 22px;     line-height: 22px;     text-align: center;     color: #000;     font-size: 12px;     font-weight: bold;     margin-left: 4px; } 

EDIT Per dan's suggestion, it would not be wise to use .input as the class name, some more specific would be advised. I was simply using .input as a generic placeholder for your css

Answer 2

Here are three different ways to do it:

Here's a working Demo in Fiddle Of All Three

Validation:

You can use native bootstrap 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

Input Group:

You can use the .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

Unstyled Input Group:

You can still use .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:

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

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