<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 ----------> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"> <div class="container" id="team"> <h5 class="section-title h1 mt-2">Card Example</h5> <div class="row justify-content-start"> <!-- Team member --> <div class="col-xl-4 col-lg-6"> <div class="card card-stats bg-light mb-4 mb-xl-3 shadow" style=""> <div class="bg-warning d-flex justify-content-center align-items-center text-dark cardbadge"> F </div> <div class="card-header bg-danger rounded"> <h6 class="bg-danger card-title text-uppercase text-white mb-0"> First Heading</h6> </div> <div class="card-body p-2"> <div class="row"> <div class="col px-1"> </div> </div> <p class="mt-1 mb-0 text-muted text-sm"> <span class="badge badge-success mr-2">French</span> <span class="">Sample text cang be replaced with desired text</span> </p> <div class="d-flex justify-content-center btnbottom"> <p> <button class="btn btn-outline-danger" type="submit"> Start Now <span class="badge badge-danger">Free</span> </button> </p></div> </div> </div> </div> <!-- Add fresh code here --> <div class="col-xl-4 col-lg-6"> <div class="card card-stats bg-light mb-4 mb-xl-3 shadow" style=""> <div class="bg-warning d-flex justify-content-center align-items-center text-dark cardbadge"> S </div> <div class="card-header bg-danger rounded"> <h6 class="bg-danger card-title text-uppercase text-white mb-0"> Second Heading</h6> </div> <div class="card-body p-2"> <div class="row"> <div class="col px-1"> </div> </div> <p class="mt-1 mb-0 text-muted text-sm"> <span class="badge badge-success mr-2">Spanish</span> <span >Some text Here For Sample..</span> </p> <div class="d-flex justify-content-center btnbottom"> <p> <a href="#" class="btn btn-outline-success"><span class="h4"><i class="fas fa-hand-holding-usd"></i></span> Paid Users</a> </p></div> </div> </div> </div> <div class="col-xl-4 col-lg-6"> <div class="card card-stats bg-light mb-4 mb-xl-3 shadow" style=""> <div class="bg-warning d-flex justify-content-center align-items-center text-dark cardbadge"> S </div> <div class="card-header bg-danger rounded"> <h6 class="bg-danger card-title text-uppercase text-white mb-0"> Second Heading</h6> </div> <div class="card-body p-2"> <div class="row"> <div class="col px-1"> </div> </div> <p class="mt-1 mb-0 text-muted text-sm"> <span class="badge badge-success mr-2">Spanish</span> <span >Some text Here For Sample..</span> </p> <div class="d-flex justify-content-center btnbottom"> <p> <a href="#" class="btn btn-outline-success"><span class="h4"><i class="fas fa-hand-holding-usd"></i></span> Paid Users</a> </p></div> </div> </div> </div> <div class="col-xl-4 col-lg-6"> <div class="card card-stats bg-light mb-4 mb-xl-3 shadow" style=""> <div class="bg-warning d-flex justify-content-center align-items-center text-dark cardbadge"> S </div> <div class="card-header bg-danger rounded"> <h6 class="bg-danger card-title text-uppercase text-white mb-0"> Second Heading</h6> </div> <div class="card-body p-2"> <div class="row"> <div class="col px-1"> </div> </div> <p class="mt-1 mb-0 text-muted text-sm"> <span class="badge badge-success mr-2">Spanish</span> <span >Some text Here For Sample..</span> </p> <div class="d-flex justify-content-center btnbottom"> <p> <a href="#" class="btn btn-outline-success"><span class="h4"><i class="fas fa-hand-holding-usd"></i></span> Paid Users</a> </p></div> </div> </div> </div> <div class="col-xl-4 col-lg-6"> <div class="card card-stats bg-light mb-4 mb-xl-3 shadow" style=""> <div class="bg-warning d-flex justify-content-center align-items-center text-dark cardbadge"> S </div> <div class="card-header bg-danger rounded"> <h6 class="bg-danger card-title text-uppercase text-white mb-0"> Second Heading</h6> </div> <div class="card-body p-2"> <div class="row"> <div class="col px-1"> </div> </div> <p class="mt-1 mb-0 text-muted text-sm"> <span class="badge badge-success mr-2">Spanish</span> <span >Some text Here For Sample..</span> </p> <div class="d-flex justify-content-center btnbottom"> <p> <a href="#" class="btn btn-outline-success"><span class="h4"><i class="fas fa-hand-holding-usd"></i></span> Paid Users</a> </p></div> </div> </div> </div> </div> </div>

#team .bg-danger { background: #FF416C; background: -webkit-linear-gradient(to left, #FF4B2B, #FF416C); background: linear-gradient(to left, #FF4B2B, #FF416C); } #team .card { border: none; background: #F9D054; min-height: 195px; } .btnbottom p { position: absolute; bottom: 15px; } #team .cardbadge { top: -15px; right: -15px; position: absolute; height: 30px; width: 30px; border-radius: 50%; font-weight: bold; font-size: 17px; }