<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 ----------> <footer class="section_all bg-light" id="contact"> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="section_title text-center"> <p class="mb-0">Get in touch</p> <h3 class="font-weight-bold text-capitalize mb-0">Contact Me</h3> </div> </div> </div> <div class="row mt-5"> <div class="col-lg-12"> <div class="text-center"> <button type="button" class="btn btn_custom btn_round" data-toggle="modal" data-target="#exampleModalCenter">Get In Touch</button> <!-- Modal --> <div class="modal fade" id="exampleModalCenter"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title mb-0 font-weight-bold" id="exampleModalLongTitle"> Contact Me</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form class="custom_form_body"> <div class="form-group"> <input type="text" class="form-control" id="fname" placeholder="First Name"> </div> <div class="form-group"> <input type="email" class="form-control" id="semail" placeholder="Email"> </div> <div class="form-group"> <input type="text" class="form-control" id="sbject" placeholder="Subject"> </div> <div class="form-group mt-2"> <textarea name="comments" id="comments" rows="6" class="form-control" placeholder="Your message..."></textarea> </div> <div> <button class="btn btn_custom w-50">Submit</button> </div> </form> </div> </div> </div> </div> </div> </div> </div> <div class="row mt-3"> <div class="col-lg-12"> <div class="contact_social_icons text-center mt-3"> <ul class="list-unstyled"> <li class="list-inline-item"><a href="#"><i class="mdi mdi-facebook"></i></a></li> <li class="list-inline-item"><a href="#"><i class="mdi mdi-twitter"></i></a></li> <li class="list-inline-item"><a href="#"><i class="mdi mdi-google-plus"></i></a></li> <li class="list-inline-item"><a href="#"><i class="mdi mdi-apple"></i></a></li> <li class="list-inline-item"><a href="#"><i class="mdi mdi-dribbble"></i></a></li> <li class="list-inline-item"><a href="#"><i class="mdi mdi-linkedin"></i></a></li> </ul> <p class="font-weight-bold mt-4"> +1 (922) 219-09-1278</p> <div class="mt-4"> <p class="text-muted mb-0">© Copyright | morrow 2018 All Right Reserved</p> </div> </div> </div> </div> </div> </footer>

/*====================== 14. Contact Us ========================*/ .contact_social_icons ul li a { font-size: 24px; color: #b1b1b1; padding-right: 46px; } .contact_social_icons ul li a:hover{ color: #1ba974; } .bg-light { background-color: #f8f9fa!important; }