CODEWITHSUNDEEP
twitter-bootstrap
Ayesha
Ayesha

Reputation: 125

bootstrap glyphicon in input filed

How do I place a glyphicon in an input field?

<div class="form-group has-success has-feedback">
    <label class="col-sm-2 control-label" for="inputSuccess">Input with success and icon</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputSuccess">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
  </div>

It is located below the input field.

Upvotes: 0

Views: 463

Answers (1)

ChaoticNadirs
ChaoticNadirs

Reputation: 2290

To show the label next to the input (rather than above) you can use a form-horizontal. If you arrange your html like this then the icon will appear inside the input :

<form class="form-horizontal" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-2" for="inputSuccess">Input with success</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputSuccess">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
  </div>
</form>

Here's a bootply example: http://www.bootply.com/rXcXvNn1ZD

Upvotes: 1

Related Questions