"Card with map"
Bootstrap 4.0.0 Snippet by stav888

<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 ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous"> <div class="container-fluid"> </div> <div class="col-md-4 mt-5"> <div class="card text-center"> <img class="card-img-top" src="https://picsum.photos/1900/1080?image=231" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Mobile Station</h5> <hr> <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d210.71405007100026!2d34.85508270214304!3d32.327303603069375!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xa2f82c16aaf97239!2z157XldeR15nXmdecINeh15jXmdeZ16nXnw!5e0!3m2!1siw!2sil!4v1536262536916" width="100%" height="600" frameborder="0" style="border:0" allowfullscreen></iframe> <a href="https://goo.gl/maps/drPW7JdCdy62"><address class="font-italic">Piazza del Colosseo, 1, 00184 Roma RM</address></a> </div> <div class="card-footer text-muted"> <div class="row"> <div class="col"> <a href=""><i class="fas fa-map"></i></a> </div> <div class="col"> <a href="mailto:test@test.com"><i class="fas fa-envelope"></i></a> </div> <div class="col"> <a href="tel:+123456789"><i class="fas fa-phone"></i></a> </div> </div> </div> </div> </div>
hr { border-top: 1px solid #007bff; width:70%; } a {color: #000;} .card{ background-color: #FFFFFF; padding:0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius:4px; box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3); } .card:hover{ box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.3); color:black; } address{ margin-bottom: 0px; } #author a{ color: #fff; text-decoration: none; }

Related: See More


Questions / Comments: