<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 ----------> <style> .bg-gradient-primary { background: linear-gradient(87deg, #437b94 0, #235682 100%) !important; width:100%; padding:50px 0px; } .card { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0,0,0,.125); border-radius: .25rem; margin: 25px 0px; } .card-stats .card-body { padding: 1rem 1.5rem; } .icon-shape { display: inline-flex; padding: 12px; text-align: center; border-radius: 50%; align-items: center; justify-content: center; }.icon { width: 3rem; height: 3rem; } .icon-shape i { font-size: 1.25rem; } </style> <section class="header bg-gradient-primary pb-8 pt-5 pt-md-8"> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="card card-stats mb-4 mb-xl-0"> <div class="card-body"> <div class="row"> <div class="col"> <span class="h2 font-weight-bold mb-0 text-muted">Kolkata</span> </div> <div class="col-auto"> <div class="icon icon-shape bg-danger text-white rounded-circle shadow"> <i class="fa fa-location-arrow text-white"></i> </div> </div> </div> <p class="mt-2 mb-0 text-muted text-sm"> <span class="text-primary mr-2"><i class="fa fa-map-marker"></i> BF-66, SaltLake </span> <span class="text-nowrap">700156</span> </p> <p class="mt-1 mb-0 text-success text-sm"><i class="fa fa-phone"></i> <span class="text-dark mr-2"> 465454655645 </span> </p> <p class="mt-1 mb-0 text-muted text-sm"><i class="fa fa-envelope-o"></i> <span class="text-dark mr-2"> info@gmail.com </span> </p> </div> </div> </div> <div class="col-md-3"> <div class="card card-stats mb-4 mb-xl-0"> <div class="card-body"> <div class="row"> <div class="col"> <span class="h2 font-weight-bold mb-0 text-muted">Kolkata</span> </div> <div class="col-auto"> <div class="icon icon-shape bg-danger text-white rounded-circle shadow"> <i class="fa fa-location-arrow text-white"></i> </div> </div> </div> <p class="mt-2 mb-0 text-muted text-sm"> <span class="text-primary mr-2"><i class="fa fa-map-marker"></i> BF-66, SaltLake </span> <span class="text-nowrap">700156</span> </p> <p class="mt-1 mb-0 text-success text-sm"><i class="fa fa-phone"></i> <span class="text-dark mr-2"> 465454655645 </span> </p> <p class="mt-1 mb-0 text-muted text-sm"><i class="fa fa-envelope-o"></i> <span class="text-dark mr-2"> info@gmail.com </span> </p> </div> </div> </div> <div class="col-md-3"> <div class="card card-stats mb-4 mb-xl-0"> <div class="card-body"> <div class="row"> <div class="col"> <span class="h2 font-weight-bold mb-0 text-muted">Kolkata</span> </div> <div class="col-auto"> <div class="icon icon-shape bg-danger text-white rounded-circle shadow"> <i class="fa fa-location-arrow text-white"></i> </div> </div> </div> <p class="mt-2 mb-0 text-muted text-sm"> <span class="text-primary mr-2"><i class="fa fa-map-marker"></i> BF-66, SaltLake </span> <span class="text-nowrap">700156</span> </p> <p class="mt-1 mb-0 text-success text-sm"><i class="fa fa-phone"></i> <span class="text-dark mr-2"> 465454655645 </span> </p> <p class="mt-1 mb-0 text-muted text-sm"><i class="fa fa-envelope-o"></i> <span class="text-dark mr-2"> info@gmail.com </span> </p> </div> </div> </div> <div class="col-md-3"> <div class="card card-stats mb-4 mb-xl-0"> <div class="card-body"> <div class="row"> <div class="col"> <span class="h2 font-weight-bold mb-0 text-muted">Kolkata</span> </div> <div class="col-auto"> <div class="icon icon-shape bg-danger text-white rounded-circle shadow"> <i class="fa fa-location-arrow text-white"></i> </div> </div> </div> <p class="mt-2 mb-0 text-muted text-sm"> <span class="text-primary mr-2"><i class="fa fa-map-marker"></i> BF-66, SaltLake </span> <span class="text-nowrap">700156</span> </p> <p class="mt-1 mb-0 text-success text-sm"><i class="fa fa-phone"></i> <span class="text-dark mr-2"> 465454655645 </span> </p> <p class="mt-1 mb-0 text-muted text-sm"><i class="fa fa-envelope-o"></i> <span class="text-dark mr-2"> info@gmail.com </span> </p> </div> </div> </div> <div class="col-md-3"> <div class="card card-stats mb-4 mb-xl-0"> <div class="card-body"> <div class="row"> <div class="col"> <span class="h2 font-weight-bold mb-0 text-muted">Kolkata</span> </div> <div class="col-auto"> <div class="icon icon-shape bg-danger text-white rounded-circle shadow"> <i class="fa fa-location-arrow text-white"></i> </div> </div> </div> <p class="mt-2 mb-0 text-muted text-sm"> <span class="text-primary mr-2"><i class="fa fa-map-marker"></i> BF-66, SaltLake </span> <span class="text-nowrap">700156</span> </p> <p class="mt-1 mb-0 text-success text-sm"><i class="fa fa-phone"></i> <span class="text-dark mr-2"> 465454655645 </span> </p> <p class="mt-1 mb-0 text-muted text-sm"><i class="fa fa-envelope-o"></i> <span class="text-dark mr-2"> info@gmail.com </span> </p> </div> </div> </div> <div class="col-md-3"> <div class="card card-stats mb-4 mb-xl-0"> <div class="card-body"> <div class="row"> <div class="col"> <span class="h2 font-weight-bold mb-0 text-muted">Kolkata</span> </div> <div class="col-auto"> <div class="icon icon-shape bg-danger text-white rounded-circle shadow"> <i class="fa fa-location-arrow text-white"></i> </div> </div> </div> <p class="mt-2 mb-0 text-muted text-sm"> <span class="text-primary mr-2"><i class="fa fa-map-marker"></i> BF-66, SaltLake </span> <span class="text-nowrap">700156</span> </p> <p class="mt-1 mb-0 text-success text-sm"><i class="fa fa-phone"></i> <span class="text-dark mr-2"> 465454655645 </span> </p> <p class="mt-1 mb-0 text-muted text-sm"><i class="fa fa-envelope-o"></i> <span class="text-dark mr-2"> info@gmail.com </span> </p> </div> </div> </div> <div class="col-md-3"> <div class="card card-stats mb-4 mb-xl-0"> <div class="card-body"> <div class="row"> <div class="col"> <span class="h2 font-weight-bold mb-0 text-muted">Kolkata</span> </div> <div class="col-auto"> <div class="icon icon-shape bg-danger text-white rounded-circle shadow"> <i class="fa fa-location-arrow text-white"></i> </div> </div> </div> <p class="mt-2 mb-0 text-muted text-sm"> <span class="text-primary mr-2"><i class="fa fa-map-marker"></i> BF-66, SaltLake </span> <span class="text-nowrap">700156</span> </p> <p class="mt-1 mb-0 text-success text-sm"><i class="fa fa-phone"></i> <span class="text-dark mr-2"> 465454655645 </span> </p> <p class="mt-1 mb-0 text-muted text-sm"><i class="fa fa-envelope-o"></i> <span class="text-dark mr-2"> info@gmail.com </span> </p> </div> </div> </div> <div class="col-md-3"> <div class="card card-stats mb-4 mb-xl-0"> <div class="card-body"> <div class="row"> <div class="col"> <span class="h2 font-weight-bold mb-0 text-muted">Kolkata</span> </div> <div class="col-auto"> <div class="icon icon-shape bg-danger text-white rounded-circle shadow"> <i class="fa fa-location-arrow text-white"></i> </div> </div> </div> <p class="mt-2 mb-0 text-muted text-sm"> <span class="text-primary mr-2"><i class="fa fa-map-marker"></i> BF-66, SaltLake </span> <span class="text-nowrap">700156</span> </p> <p class="mt-1 mb-0 text-success text-sm"><i class="fa fa-phone"></i> <span class="text-dark mr-2"> 465454655645 </span> </p> <p class="mt-1 mb-0 text-muted text-sm"><i class="fa fa-envelope-o"></i> <span class="text-dark mr-2"> info@gmail.com </span> </p> </div> </div> </div> </div> </div> </section>