"beautiful Bootstrap 4 Card Design"
Bootstrap 4.1.1 Snippet by top10theme123

<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 ----------> <!-- Start Service Area --> <section class="pt-100 pb-70 service" id="service"> <div class="container"> <div class="row"> <div class="col-lg-4 col-sm-6 text-center"> <a href="#0"> <div class="card card-block"> <div class="icon"> <img src="https://img.icons8.com/?id=j37gjdmTRVy1&size=2x&color=000000"> </div> <div class="card-body p-0"> <h3 class="card-heading">Easily Managable</h3> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </a> </div> <div class="col-lg-4 col-sm-6 text-center"> <a href="#0"> <div class="card card-block"> <div class="icon"> <img src="https://img.icons8.com/?id=Uf3uAJcLJZ57&size=2x&color=000000"> </div> <div class="card-body p-0"> <h3 class="card-heading">24/7 Hour Support</h3> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </a> </div> <div class="col-lg-4 col-sm-6 text-center"> <a href="#0"> <div class="card card-block"> <div class="icon"> <img src="https://img.icons8.com/?id=ZdQwEGsM9W4u&size=2x&color=000000"> </div> <div class="card-body p-0"> <h3 class="card-heading">1 Month Free Trail</h3> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </a> </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-lg-12 text-right"> <p class="mt-2 text-muted">Create By <a href="http://top10theme.com/">top10theme</a></p> </div> </div> </div> </section> <!-- End Service Area -->
@import url('https://fonts.googleapis.com/css?family=Philosopher:700&display=swap'); body { font-family: 'Philosopher', sans-serif; position: relative; font-weight: 400; font-size: 15px; color: #8a919c; line-height: 30px; } .pt-100{padding-top: 100px;} .pb-70{padding-top: 70px;} /*------ service ------*/ a, a:hover { text-decoration: none; outline: 0; } .service { position: relative; background-color: #fff; } .section_headding h1 { font-size: 40px; margin-bottom: 0px; text-transform: capitalize; } .card-block { position: relative; box-shadow: 0px 20px 59px -15px rgba(0, 0, 0, 0.25); border: none; z-index: 5; padding: 30px; margin-bottom: 30px; border-radius: 20px; background: linear-gradient(130deg, #E91E63 0, #FF5722 100%); } .card-block:before { content: ''; position: absolute; width: 100%; height: 100%; opacity: 0; z-index: -1; top: 0; left: 0; border-radius: 20px; } .card-block:hover:before { opacity: 1; transition-duration: 0.5s; transition-timing-function: ease; background-color: #ffffff; } .card-block .icon { width: 75px; height: 75px; position: relative; margin: 0 auto; display: flex; justify-content: center; align-items: center; } .card-block .icon img { width: 100%; } .card-block .card-heading, .card-block .card-body, .card-block p { color: #fff; } .card-block:hover .card-heading, .card-block:hover .card-body, .card-block:hover p { color: #000; } .card-block .card-heading { padding: 20px 0px 10px; font-size:24px; }

Related: See More


Questions / Comments: