1) The border color of form input
elements does not change to green, orange, or red as expected.
2) The related gif like "ok" or "x" is not being inserted into the correct place of the input field.
I tried using form-control-success, form-control-warning, and form-control-danger classes but they did not work. Why?
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
<label class="form-control-label text-success" for="inputSuccess2">
Success
</label>
<input type="text" class="form-control form-control-success" id="inputSuccess2" aria-describedby="inputSuccess2Status">
</div>
<div class="form-group">
<label class="form-control-label text-warning" for="inputWarning2">
With Warning
</label>
<input type="text" class="form-control form-control-warning" id="inputWarning2" aria-describedby="inputWarning2Status">
</div>
<div class="form-group">
<label class="form-control-label text-danger" for="inputError2">With Error</label>
<input type="text" class="form-control form-control-danger" id="inputError2" aria-describedby="inputError2Status">
</div>
EDIT:
A solution to this issue can be found [here][1]
[1]: Bootstrap 4 form input with icon for validationstrong text