<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="form-group"> <label class="control-label" for="focusedInput">Focused input</label> <input class="form-control" id="focusedInput" value="This is focused..." type="text"> </div> <div class="form-group"> <label class="control-label" for="disabledInput">Disabled input</label> <input class="form-control" id="disabledInput" placeholder="Disabled input here..." disabled="" type="text"> </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning">Input warning</label> <input class="form-control" id="inputWarning" type="text"> </div> <div class="form-group has-error"> <label class="control-label" for="inputError">Input error</label> <input class="form-control" id="inputError" type="text"> </div> <div class="form-group has-success"> <label class="control-label" for="inputSuccess">Input success</label> <input class="form-control" id="inputSuccess" type="text"> </div> <div class="form-group"> <label class="control-label" for="inputLarge">Large input</label> <input class="form-control input-lg" id="inputLarge" type="text"> </div> <div class="form-group"> <label class="control-label" for="inputDefault">Default input</label> <input class="form-control" id="inputDefault" type="text"> </div> <div class="form-group"> <label class="control-label" for="inputSmall">Small input</label> <input class="form-control input-sm" id="inputSmall" type="text"> </div> <div class="form-group"> <label class="control-label">Input addons</label> <div class="input-group"> <span class="input-group-addon">$</span> <input class="form-control" type="text"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Button</button> </span> </div> </div>