classes related with form control classes are not functioning properly in bootstrap 4

Question

1) form input elements' border color does not change to related color as green, orange or red.

2) It does not insert related gif like "ok" or "x" gif into right place of input.

I expected form-control-success or form-control-warning or form-control-danger would work but it did not. 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:

This fixed my issue.[link][1]

[1]: Bootstrap 4 form input with icon for validationstrong text

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. — Paulie_D

Jaro Jaro · Accepted Answer · 2019-05-22T16:36:47

1) There are no such classes as .form-control-success, .form-control-danger etc specified in Bootstrap 4. You may add them to your own stylesheet, example:

.form-control.form-control-success:focus{
   border-color: #28a745;
   box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

2) To insert a gif(s) to the input you will need to further customise your html/css/js. Start here: https://getbootstrap.com/docs/4.3/components/input-group/#custom-forms

classes related with form control classes are not functioning properly in bootstrap 4

1 Answers