<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="container"> <form> <legend>Inline label field</legend> <fieldset class="form-group inline-label"> <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input"> <label for="formGroupExampleInput">Example label</label> </fieldset> <fieldset class="form-group inline-label"> <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input"> <label for="formGroupExampleInput2">Another label</label> </fieldset> </form> </div>

.inline-label{ position: relative; } .inline-label label { position: absolute; top: 0; font-size: 80%; color: #788991; font-weight: bold; padding: 6px 12px; } .inline-label .form-control{ padding-top: 24px; height: auto; } .inline-label .form-control:focus{ box-shadow: none; } .inline-label .form-control:focus + label{ color: #29abe9; }