Validation

Bootstrap includes validation styles for danger, warning, and success states on form controls.

How they work

To use, add .has-warning, .has-danger, or .has-success to the parent element. Contextual validation text, in addition to your usual form field help text, can be added with the use of .form-control-feedback.

Example help text that remains unchanged. 
<div class="form-group has-success">
  <label class="col-form-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control form-control-success" id="inputSuccess1">
  <div class="form-control-feedback">Success! You've done it.</div> 
</div>
<div class="form-group has-warning">
  <label class="col-form-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control form-control-warning" id="inputWarning1">
  <div class="form-control-feedback">Shucks, check the formatting of that and try again.</div> 
</div>
<div class="form-group has-danger">
  <label class="col-form-label" for="inputDanger1">Input with danger</label>
  <input type="text" class="form-control form-control-danger" id="inputDanger1">
  <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
  <small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>

Validation states

Add other states to your custom forms with our validation classes.

<div class="form-check has-success">
  <input type="checkbox" class="form-check-input" id="checkboxSuccess" value="option1">
  <label class="form-check-label" for="checkboxSuccess">
    Checkbox with success
  </label>
</div>  
<div class="form-check has-warning">
  <input type="checkbox" class="form-check-input" id="checkboxWarning" value="option2">
  <label class="form-check-label" for="checkboxWarning">
    Checkbox with warning
  </label>
</div>  
<div class="form-check has-danger">
  <input type="checkbox" class="form-check-input" id="checkboxDanger" value="option3">
  <label class="form-check-label" for="checkboxDanger">
    Checkbox with danger
  </label>
</div>

Input group states

https://umbler.com/

$ .00

$ 0.00 
<div class="input-group has-success">
  <span class="input-group-addon" id="basic-addon3">https://umbler.com/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<br>
<div class="input-group has-warning">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
    <span class="input-group-addon">.00</span>
</div> 
<br>
<div class="input-group has-danger">
    <span class="input-group-addon">$</span>
    <span class="input-group-addon">0.00</span>
    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
</div>