Put search Icon inside text box

Question

I am trying place search icon inside text box.But,Its displaying end of the row.

<div class="row input-group">
    <input class="col-lg-3 col-md-3 col-sm-5 col-xs-5 form-control" type="text" id="searchroleName" placeholder="Search here"  aria-describedby="basic-addon2"/>
    <span class="input-group-addon fa fa-search"  id="basic-addon2"></span>
</div>

https://jsfiddle.net/9dxryetu/

Its displaying like this

Did you even look [at the documentation](http://getbootstrap.com/components/#input-groups)? — Vucko, Apr 24 '17 at 13:00

score 3 · Answer 1 · answered Apr 24 '17 at 12:53

3

Just remove row class from input-group div, updated fiddle

answered Apr 24 '17 at 12:53

Super User

9,448
3
31
47

score 2 · Accepted Answer · answered Apr 24 '17 at 12:57

2

<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>

answered Apr 24 '17 at 12:57

Unknown_Coder

764
6
24

score 1 · Answer 3 · answered Apr 24 '17 at 12:59

1

Just checkout this jsFiddle. The problem was that you were not properly implementing .row include .container-fluid also to prevent -15px margin.

https://jsfiddle.net/fLLkwaqw

answered Apr 24 '17 at 12:59

Climb Tree

490
1
7
15

If this works for you. Mark this answer as correct. – Climb Tree Apr 24 '17 at 13:00

Put search Icon inside text box

3 Answers3