<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-fluid p-0 m-0"> <div class="row no-gutters" > <div class="col-12"> <div class="position-absolute p-5 bg-white m-5 shadow-lg map-box2"> <h3 class="text-muted">Contact</h3> <div class=" mt-4"> <address> <strong class="text-muted">Address</strong><br> 1355 Market St, Suite 900<br> San Francisco, CA 94103 </address> <address> <strong class="text-muted">Phone</strong><br> +1800-555-2770 </address> <address class="mb-5"> <strong class="text-muted">Email</strong><br> <a href="mailto:#" class="text-secondary">first.last@example.com</a> </address> <a href="" class="btn btn-outline-danger btn-lg w-100 d-block">Send Message</a> </div> </div> <div class="embed-responsive embed-responsive-16by9 " style="height:560px !important;"> <iframe id="gmap_canvas" src="https://maps.google.com/maps?q=university%20of%20san%20francisco&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe> </div> </div> </div> </div> <div class="py-5 text-center font-weight-bold h5"> More bootstrap snipps on <a href="https://bootstraplily.com/" target="_blank">www.bootstraplily.com</a></div>

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'); body { font-family: 'Roboto', sans-serif; } .btn { padding: 14px 26px; font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; } .btn-danger { background-color: #e34c43; border-color: #e34c43; } #gmap_canvas { filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="g"><feColorMatrix type="matrix" values="0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0 0 0 1 0"/></filter></svg>#g'); -webkit-filter: grayscale(90%); filter: grayscale(90%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1); } .map-box2{ z-index:9999; right:60px; width:360px; }