Bootstrap: Glyphicon icon going out of the input boxes right edge

Question

I was trying to add glyphicons for the validation in the form with bootstrap(bootstrap.min.css) and I didn't want the form's input field stretch and span the width of the whole browser window

so I enclosed the Input field in the Grid(col-sm-x) and now I want to use the glyphicons in the right of the input box for the validation. When I remove the Grid Styling It works fine but I don't want the input field field to be that wide and use the glyphicons here's the code

    <div class="form-group has-success has-feedback">
        <label class='control-label' for='p_name'>Name of Corner: </label>
        <div class='row'>
            <div class='col-sm-4'>
                <input id='p_name' name='p_name' type='text' class='form-control' placeholder="Santy's Burgers">
                <span class='glyphicon glyphicon-ok form-control-feedback' area-hidden='true'></span>
            </div>
        </div>
    </div>

And here's what happens

The glyphicon on the right goes outside of the input body

Answer 1

you will need to add a class to input and glyphicons like

and given class to position relative

.right-inner-addon {
    position: relative;
}

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css"/>
<div class="form-group has-success has-feedback">
        <label class='control-label' for='p_name'>Name of Corner: </label>
        <div class='row'>
            <div class='col-sm-4'>
              <div class="right-inner-addon">
                <input id='p_name' name='p_name' type='text' class='form-control' placeholder="Santy's Burgers">
                <span class='glyphicon glyphicon-ok form-control-feedback' area-hidden='true'></span></div>
            </div>
        </div>
    </div>