"A Responsive Contact form by Bootstrap-4.0.0"
Bootstrap 4.0.0 Snippet by Noman1416

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> </head> <body> <section id="contact"> <div class="container"> <h3 class="text-center text-uppercase">contact us</h3> <p class="text-center w-75 m-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum purus at sem ornare sodales. Morbi leo nulla, pharetra vel felis nec, ullamcorper condimentum quam.</p> <div class="row"> <div class="col-sm-12 col-md-6 col-lg-3 my-5"> <div class="card border-0"> <div class="card-body text-center"> <i class="fa fa-phone fa-5x mb-3" aria-hidden="true"></i> <h4 class="text-uppercase mb-5">call us</h4> <p>+8801683615582,+8801750603409</p> </div> </div> </div> <div class="col-sm-12 col-md-6 col-lg-3 my-5"> <div class="card border-0"> <div class="card-body text-center"> <i class="fa fa-map-marker fa-5x mb-3" aria-hidden="true"></i> <h4 class="text-uppercase mb-5">office loaction</h4> <address>Suite 02, Level 12, Sahera Tropical Center </address> </div> </div> </div> <div class="col-sm-12 col-md-6 col-lg-3 my-5"> <div class="card border-0"> <div class="card-body text-center"> <i class="fa fa-map-marker fa-5x mb-3" aria-hidden="true"></i> <h4 class="text-uppercase mb-5">office loaction</h4> <address>Suite 02, Level 12, Sahera Tropical Center </address> </div> </div> </div> <div class="col-sm-12 col-md-6 col-lg-3 my-5"> <div class="card border-0"> <div class="card-body text-center"> <i class="fa fa-globe fa-5x mb-3" aria-hidden="true"></i> <h4 class="text-uppercase mb-5">email</h4> <p>http://al.a.noman1416@gmail.com</p> </div> </div> </div> </div> </div> </section> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> </body> </html>
#contact .card:hover i,#contact .card:hover h4{ color: #87d37c; }

Related: See More

Paper Kit 2
Contact Form
Bootstrap Contact Form
Bootstrap Contact Form

Questions / Comments: