Bootstrap 3 - Validation States

by Kyle Mitofsky

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <!-- Validation -->
        <div class="form-group col-lg-4">
            <div class="form-group has-feedback">
                <label class="control-label" for="inputValidation">Validation </label>
                <input type="text" class="form-control" id="inputValidation" placeholder="Search"/>
                <span class="glyphicon glyphicon-search form-control-feedback"></span>
            </div>
        </div>
        
        <!-- Input Group -->
        <div class="col-lg-4">
            <div class="form-group">
                <label class="control-label" for="inputGroup">Input Group </label>
                <div class="input-group">
                    <input type="text" class="form-control"
                           placeholder="Search" id="inputGroup"/>
                    <span class="input-group-addon">
                        <i class="fa fa-search"></i>
                    </span>
                </div>
            </div>
        </div>
        
        <!-- Unstyled Input Group -->
        <div class="col-lg-4">
            <div class="form-group">
                <label class="control-label" for="inputGroup">Unstyled Input Group</label>
                <div class="input-group input-group-unstyled">
                    <input type="text" class="form-control"
                           placeholder="Search" id="inputGroup"/>
                    <span class="input-group-addon">
                        <i class="fa fa-search"></i>
                    </span>
                </div>
    ...

CSS

.input-group.input-group-unstyled input.form-control {
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
.input-group-unstyled .input-group-addon {
    border-radius: 4px;
    border: 0px;
    background-color: transparent;
}