<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 rel="stylesheet" href="https://cdn.lineicons.com/2.0/LineIcons.css"> <div class="container"> <div class="row"> <div class="col-12"> <h4 class="py-5 text-center">More creative pricing tables design on <a href="https://bootstraplily.com/bootstrap-snipps/pricing-tables/">bootstraplily.com</a>, check these out.</h4> <div class="table-responsive"> <table class="table table-striped text-center"> <thead> <tr> <th scope="col" class="text-white" style="background-color:#dd6359;">Plan</th> <th scope="col" class="text-white" style="background-color:#e4611f;">Starter</th> <th scope="col" class="text-white" style="background-color:#e58724;">Basic</th> <th scope="col" class="text-white" style="background-color:#1b83af;">Premium</th> </tr> <tr> <th scope="col" class="text-white h2" style="background-color:#f18073;">Price <br> Table</th> <th scope="col" class="text-white h1" style="background-color:#f87933;">$20 <span class="h6 d-block">per month</span></th> <th scope="col" class="text-white h1" style="background-color:#fea836;">$24 <span class="h6 d-block">per month</span></th> <th scope="col" class="text-white h1" style="background-color:#2e91c3;">$34 <span class="h6 d-block">per month</span></th> </tr> </thead> <tbody> <tr> <th scope="row">Lorem ipsum dolor </th> <td><strong>5GB</strong> Space</td> <td><strong>20GB</strong> Space</td> <td><strong>50GB</strong> Space</td> </tr> <tr> <th scope="row">Ut pretium mi </th> <td><strong>1GB</strong> Bandwidth</td> <td><strong>5GB</strong> Bandwidth</td> <td><strong>20GB</strong> Bandwidth</td> </tr> <tr> <th scope="row">Viva finibus scele </th> <td><i class="lni lni-checkmark text-success font-weight-bold"></i></td> <td><i class="lni lni-checkmark text-success font-weight-bold"></i></td> <td><i class="lni lni-checkmark text-success font-weight-bold"></i></td> </tr> <tr> <th scope="row">Donec risus purus</th> <td><i class="lni lni-checkmark text-success font-weight-bold"></i></td> <td><i class="lni lni-checkmark text-success font-weight-bold"></i></td> <td><i class="lni lni-checkmark text-success font-weight-bold"></i></td> </tr> <tr> <th scope="row">Nam eget nisl</th> <td><i class="lni lni-close text-danger font-weight-bold"></i></td> <td><i class="lni lni-checkmark text-success font-weight-bold"></i></td> <td><i class="lni lni-checkmark text-success font-weight-bold"></i></td> </tr> <tr> <th scope="row">Proin ut purus</th> <td><i class="lni lni-close text-danger font-weight-bold"></i></td> <td><i class="lni lni-checkmark text-success font-weight-bold"></i></td> <td><i class="lni lni-checkmark text-success font-weight-bold"></i></td> </tr> <tr> <th scope="row">Donec dolor ipsum</th> <td><i class="lni lni-close text-danger font-weight-bold"></i></td> <td><i class="lni lni-close text-danger font-weight-bold"></i></td> <td><i class="lni lni-checkmark text-success font-weight-bold"></i></td> </tr> <tr> <th scope="row">Sapien sapien eget</th> <td><i class="lni lni-close text-danger font-weight-bold"></i></td> <td><i class="lni lni-close text-danger font-weight-bold"></i></td> <td><i class="lni lni-checkmark text-success font-weight-bold"></i></td> </tr> <tr> <th scope="row" class="bg-white"></th> <td class="p-0"><a href="" class="link-hover1 text-white h5 w-100 d-block py-4 mb-0">SIGN UP</a></td> <td class="p-0"><a href="" class="link-hover2 text-white h5 w-100 d-block py-4 mb-0">SIGN UP</a></td> <td class="p-0"><a href="" class="link-hover3 text-white h5 w-100 d-block py-4 mb-0">SIGN UP</a></td> </tr> </tbody> </table> </div> </div> </div> </div>

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'); .table { background-color: #FFF; font-family: 'Roboto', sans-serif; } .link-hover1 { background-color: #f87933; transition: all 0.3s ease; } .link-hover1:hover { background-color: #da560d; text-decoration: none; } .link-hover2 { background-color: #fea836; transition: all 0.3s ease; } .link-hover2:hover { background-color: #e0850c; text-decoration: none; } .link-hover3 { background-color: #2e91c3; transition: all 0.3s ease; } .link-hover3:hover { background-color: #157baf; text-decoration: none; }