Bootstrap Form Control States

There are various form control states in bootstrap. You can use it by using following classes.

Bootstrap Form Control States

Code Structure
<div class="container">
    <form action="#" role="form" class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-3 control-label">Focused</label>
            <div class="col-sm-9">
                <input class="form-control" id="focusedInput" type="text" placeholder="Click to focus">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">Disabled</label>
            <div class="col-sm-9">
                <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here" disabled>
            </div>
        </div>
        <fieldset disabled>
            <div class="form-group">
                <label class="col-sm-3 control-label">Disabled Select</label>
                <div class="col-sm-9">
                    <select class="form-control">
                    <option>Disabled select</option>
                </select>
                </div>
            </div>
        </fieldset>
        <div class="form-group has-success has-feedback">
            <label class="col-sm-3 control-label">Input with success and glyphicon</label>
            <div class="col-sm-9">
                <input type="text" class="form-control">
                <span class="glyphicon glyphicon-ok form-control-feedback"></span>
            </div>
        </div>
        <div class="form-group has-warning has-feedback">
            <label class="col-sm-3 control-label">Input with warning and glyphicon</label>
            <div class="col-sm-9">
                <input type="text" class="form-control">
                <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
            </div>
        </div>
        <div class="form-group has-error has-feedback">
            <label class="col-sm-3 control-label">Input with error and glyphicon</label>
            <div class="col-sm-9">
                <input type="text" class="form-control">
                <span class="glyphicon glyphicon-remove form-control-feedback"></span>
            </div>
        </div>
    </form>
</div>

Share this

Related Posts