<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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="p-x-1 p-y-3"> <form class="card card-block m-x-auto bg-faded" style="max-width: 25rem"> <legend class="m-b-1 text-xs-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 custom-select" id="country"> <option selected>United States</option> <option>Canada</option> <option>...</option> </select> <label for="country">Country</label> </div> <div class="form-group"> <label class="custom-control custom-checkbox"> <input class="custom-control-input" type="checkbox"/> <span class="custom-control-indicator"></span> <span class="custom-control-description">Subscribe to newsletter</span> </label> </div> <div class="text-xs-center"> <button class="btn btn-block btn-primary" type="submit">Sign up</button> </div> </form> <div class="text-xs-center"> <a href="https://github.com/tonystar/bootstrap-float-label" target="_blank">Project on GitHub</a> • <a href="http://bootsnipp.com/tonystar/snippets/56VoR" target="_blank">Switch to Bootstrap 3</a> </div> </div>

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

// No JS!