Bootstrap contact details ui section with map on side

Bootstrap contact details ui section with map on side, you can use this on middle of your web page, simple div structure easy to implement.

<!doctype html>
<html lang="en">
<!-- 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="">

<title>Bootstrap contact section</title>

<style type="text/css">
@import url(';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;
    filter: url('data:image/svg+xml;utf8,<svg xmlns=""><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);

<div class="container mt-5">
<div class="row">
<div class="col-lg-8 col-md-12">
<div class="embed-responsive embed-responsive-16by9 " style="height:540px !important;">

<iframe id="gmap_canvas" class="rounded" src="" 
frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>

<div class="col-lg-4 col-md-12">

<div class="px-3 bg-white pt-4 pt-md-0">
<img src="" class="img-fluid rounded">
<div class="mt-4">
    <strong class="text-muted">Address</strong><br>
    1355 Market St, Suite 900<br>
    San Francisco, CA 94103
    <strong class="text-muted">Phone</strong><br>
  <address class="mb-5">
    <strong class="text-muted">Email</strong><br>
    <a href="mailto:#" class="text-secondary"></a>
  <a href="" class="btn btn-outline-danger btn-lg w-100 d-block">Send Message</a>


Spread the love

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top