<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 style="padding: 3rem 1rem"> <form class="well center-block" style="max-width: 35rem"> <legend class="text-center">Sign up</legend> <div class="form-group input-group"> <span class="has-float-label"> <input class="form-control" id="first" type="text" placeholder="Name"/> <label for="first">First</label> </span> <span class="has-float-label"> <input class="form-control" id="last" type="text" placeholder="Surname"/> <label for="last">Last</label> </span> </div> <div class="form-group input-group"> <span class="input-group-addon">@</span> <span class="has-float-label"> <input class="form-control" id="email" type="email" placeholder="box@example.com"/> <label for="email">Email</label> </span> </div> <div class="form-group has-float-label"> <input class="form-control" id="password" type="password" placeholder="••••••••"/> <label for="password">Password</label> </div> <div class="form-group has-float-label"> <select class="form-control" id="country"> <option selected>United States</option> <option>Canada</option> <option>...</option> </select> <label for="country">Country</label> </div> <div class="form-group checkbox"> <label> <input type="checkbox"/> Subscribe to newsletter </label> </div> <div> <button class="btn btn-block btn-primary" type="submit">Sign up</button> </div> </form> <div class="text-center"> <a href="https://github.com/tonystar/bootstrap-float-label/tree/v3-dev" target="_blank">Project on GitHub</a> • <a href="http://bootsnipp.com/tonystar/snippets/x8xmR" target="_blank">Switch to Bootstrap 4</a> </div> </div>

@import "https://cdn.rawgit.com/tonystar/bootstrap-float-label/v3.0.0/dist/bootstrap-float-label.css";

// No JS!