Bootstrap form-group has-feedback glyphicon alignment issue - css

Question

I've been using Bootstrap for my MVC project. The problem is that the glyphicon (which is suppose to be at the end of the text box) is outside the box.
I believe it is because I am trying to arrange the two password field side by side but I didn't tell the glyphicon to re-align itself.
<div class="row">
<div class="col-xs-6 form-group has-feedback">
#Html.LabelFor(l => l.Password, new { #class = "control-label", #for = "pwd" })
#Html.PasswordFor(l => l.Password, new { id = "pwd", #class = "form-control" })
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-feedback col-xs-6">
<label class="control-label" for="pwd2">#Res.Resource.PasswordConfirm</label>
#Html.PasswordFor(l => l.Password, new { id = "pwd2", #class = "form-control" })
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
Thanks in advance

Answer 1

It's because you're adding the .form-control and the .has-feedback classes on the column <div>. It should be a child <div> of the column.
See the difference between the left column (classes on the same element) and the right column (nested <div>'s).
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-6 form-group has-feedback">
<label for="pwd" class="control-label">label</label>
<input type="password" id="pwd" class="form-control" />
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="col-xs-6">
<div class="form-group has-feedback">
<label for="pwd" class="control-label">label</label>
<input type="password" id="pwd" class="form-control" />
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
</div>
</div>
The reason it fails is that the icon is positioned relative to the element with the has-feedback class. In the left example the col-xs-6 class has 15px of padding (used for the gutter / whitespace between columns). This makes the icon move 15px to the right.