Bootstrap 3 - Validation States

by Kyle Mitofsky

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="container">
    <div class="row">
        <!-- Normal Size -->
        <div class="col-xs-12"><h3>Normal Size</h3></div>
        <!-- Validation -->
        <div class="col-lg-4 clearfix">
            <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>
            </div>
        </div>
        
        
        <!-- Small Size -->
        <div class="col-xs-12"><h3>Small Size</h3></div>
        <!-- Validation -->
        <div class="col-lg-4 clearfix">
            <div class="form-group...

CSS

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