Form Group

            
              <div class="form-group">
  <label for="exampleID" class="form-label">From Group</label>
  <div class="form-group-wrapper">
    <input class="form-text form-control" type="text" id="exampleID" name="form-name" placeholder="Placeholder">
  </div>
</div>

            
          

            
              <div class="form-group form-group--disabled">
  <label for="exampleID" class="form-label">From Group</label>
  <div class="form-group-wrapper">
    <input class="form-text form-control" type="text" id="exampleID" name="form-name" placeholder="Placeholder">
  </div>
</div>

            
          

            
              <div class="form-group form-group--error">
  <label for="exampleID" class="form-label">Input with danger</label>
  <div class="form-group-wrapper">
    <input class="form-text form-control form-control-danger" type="text" id="exampleID" name="form-name" placeholder="Placeholder">
    <div class="form-control-feedback">
      Sorry, that username"s taken. Try another?
    </div>
  </div>
</div>

            
          

            
              <div class="form-group form-group--success">
  <label for="exampleID" class="form-label">Input with success</label>
  <div class="form-group-wrapper">
    <input class="form-text form-control form-control-success" type="text" id="exampleID" name="form-name" placeholder="Placeholder">
    <div class="form-control-feedback">
      Success! You"ve done it.
    </div>
  </div>
</div>

            
          

            
              <div class="form-group form-group--warning">
  <label for="exampleID" class="form-label">Input with warning</label>
  <div class="form-group-wrapper">
    <input class="form-text form-control form-control-warning" type="text" id="exampleID" name="form-name" placeholder="Placeholder">
    <div class="form-control-feedback">
      Shucks, check the formatting of that and try again.
    </div>
  </div>
</div>