Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Feedback with optional icons

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 223
    Comment on it

    Feedback with optional icons.

    Bootstrap provides classes to add optional feedback icons which would required manual positioning for inputs. Thus, it save a lot of time for making it user friendly. This can be done by adding class .has-feedback and the right icon.

    Check below example

    <div class="form-group has-success has-feedback">
      <label class="control-label" for="inputSuccess2">Input with success</label>
      <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess2Status" class="sr-only">(success)</span>
    </div>
    <div class="form-group has-warning has-feedback">
      <label class="control-label" for="inputWarning2">Input with warning</label>
      <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
      <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
      <span id="inputWarning2Status" class="sr-only">(warning)</span>
    </div>
    <div class="form-group has-error has-feedback">
      <label class="control-label" for="inputError2">Input with error</label>
      <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
      <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
      <span id="inputError2Status" class="sr-only">(error)</span>
    </div>
    <div class="form-group has-success has-feedback">
      <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
    </div>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: