<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class = "container"> <div class = "specialbox"> <form id = "contact"> <h1>Contact Us</h1> <h4>Your feedback is greatly appreciated</h4> <div class="form-group"> <div class = "col-sm-12"> <input type="text" class="form-control" id="name" placeholder = "Name"> </div> </div> <div class="form-group"> <div class = "col-sm-12"> <input type="email" class="form-control" aria-describedby="emailHelp" id="emailaddress" placeholder = "Email"> </div> </div> <div class="form-group"> <div class = "col-sm-12"> <textarea class="form-control" id="messagesystem" rows="5" placeholder = "Message"></textarea> </div> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </div>

body { background-color: #ffdb58; padding-top: 60px; } #contact{ padding-top: 5px; margin: 0 auto; max-width: 880px; background-color: #fff; } h1{ text-align: center; font-size: 50px; } h4{ text-align: center; } .form-group{ padding-top: 10px; padding-bottom: 10px; }