<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="rsvp-section" id="rsvp"> <div class="container"> <div class="row pt-5 pb-5"> <div class="col-12 text-center pt-5 pb-5"> <h2 class="headingbig display-3 pt-3 text-white">Come Join Us</h2> </div> <div class="col-12 text-white p-5 bg-black"> <form> <div class="form-row"> <div class="form-group col-md-6"> <label>Your Name</label> <input type="text" class="form-control" id="inputName" placeholder="Your Name"> </div> <div class="form-group col-md-6"> <label for="inputEmail4">Email</label> <input type="email" class="form-control" id="inputEmail4" placeholder="Email"> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label>Will you attend?</label> <select class="form-control"> <option selected="">Yes, I will be there</option> <option>Sorry, I can't come</option> </select> </div> <div class="form-group col-md-6"> <label>Meal preference</label> <select class="form-control"> <option selected="">Veg</option> <option>Non Veg</option> </select> </div> </div> <div class="form-group"> <label>Your Message</label> <textarea class="form-control" id="inputmessage" placeholder="Your Message"></textarea> </div> <div class="form-group text-center"> <button type="submit" class="btn btn-primary" style="width: 150px;">Send</button> </div> </form> </div> </div> </div> </div> <div class="container text-center small text-muted mt-4 mb-5"> Design by <a href="https://bootstraplily.com/" target="_blank">www.bootstraplily.com</a> </div>

.rsvp-section { background: url(https://bootstraplily.com/demo/contact-form/form-one/img/bottom-form-bg.jpg); } .bg-black { background-color: rgba(000,000,000,0.5); border: 4px double rgba(255,255,255,0.3); } label { font-weight: 600; }