<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 ----------> <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/tonystar/bootstrap-float-label/v4.0.0/dist/bootstrap-float-label.min.css'> <div class="container"> <div class="row" id="contact"> <div class="col-md-12"> <h3 class="text-uppercase headline">Contact</h3> <hr> <form> <div class="col-md-5 offset-md-4"> <div class="form-group has-float-label"> <input type="text" class="form-control" id="first-name" placeholder="First Name" required> <label for="first-name">First</label> </div> <div class="form-group"> <span class="has-float-label"> <label for="last-name">Last</label> <input type="text" class="form-control" id="last-name" placeholder="Last Name"> </span> </div> <div class="form-group"> <span class="has-float-label"> <label for="tel-input">Telephone</label> <input class="form-control" type="tel" placeholder="(405) 237-9242" id="tel-input"> </span> </div> <div class="form-group"> <span class="has-float-label"> <label for="email">Email</label> <input type="email" class="form-control" id="email" aria-describedby="email-help" placeholder="Enter email" pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" required> </span> <small id="email-help" class="form-text text-muted">I'll never share your email with anyone else.</small> </div> <div class="form-group"> <span class="has-float-label"> <label for="message-box">Hello</label> <textarea class="form-control" id="message-box" rows="3" required></textarea> </span> </div> <button type="submit" class="btn btn-primary">Email Me</button> </div> </form> </div> </div> </div>