How to change bootstrap validator icon position

I am trying to validate form fields. To get this result:

I have tried a simple solution and gives me almost the result needed but the icon is not placed correctly. I can change the icon with JS

<div class="form-group row">
     <label for="datum" class="col-md-2 col-form-label">Datum toolbox</label>
    <div class="col-md-2 input-group has-warning" id="div_datum">
      <input type="text" class="form-control datepicker" id="datum" name="datum" onclick="validate()"><span class="glyphicon glyphicon-warning-sign form-control-feedback" id="datum_status"></span><small class="form-text text-muted">Vul datum in</small>
    </div>
</div>

Any suggestions in here?

Trying an Bootstrap add-on gives me no result at all.

<div class="form-group row has-danger">
     <label for="datum" class="col-md-2 col-form-label" for="datum2">Datum toolbox</label>
    <div class="col-md-2 input-group has-warning" id="div_datum2" for="datum2">
      <input type="text" class="form-control form-control-danger datepicker" id="datum2" name="datum2" onclick="validate()"><small class="form-text text-muted">Vul datum in</small>
    </div>
</div>

I have added the following files: //cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css //cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js

And this extra JS code:

<script type="text/javascript">
$(document).ready(function() {
    $('#tryitForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            datum2: {
                validators: {
                    notEmpty: {
                        message: 'Please fill in'
                    }
                }
            },
        },
    });
});
</script>

After the suggested edit of user8175473 the icon is placed correctly although missing the rounded corner on the right side of the form field.

<div class="form-group row">
     <label for="datum" class="col-md-2 col-form-label">Datum toolbox</label>
    <div class="col-md-2 input-group has-warning" id="div_datum">
      <input type="text" class="form-control datepicker" id="datum" name="datum" onclick="validate()"><span class="glyphicon glyphicon-warning-sign form-control-feedback" id="datum_status"></span>
    </div>
</div>

Even adding this to the CSS is not changing this.

.form-control{
  -webkit-border-radius: 1;
     -moz-border-radius: 1;
          border-radius: 1;
}

You should ensure that you use Bootstrap v3.1.0 or later To use feedback icons then you can use this css. I have tested. it works here

.form-control-feedback{
  position:relative !important;
  float: left;
  left:5px;
  top:-3px !important;
}