<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 ----------> <div class="container mb-5 mt-5"> <table class="table table-striped bg-white"> <thead class="pricing_head"> <tr> <th class="title"></th> <th class="other-color-1"> <p>Basic</p> </th> <th class="accent"> <p>Business</p> </th> <th class="other-color-2"> <p>Pro</p> </th> <th class="other-color-3"> <p>Enterprise</p> </th> </tr> </thead> <tbody class="pricing_body"> <tr class="pricing_row"> <th class="pricing_th">Users included</th> <td class="pricing_td"><p>5</p></td> <td class="pricing_td"><p>20</p></td> <td class="pricing_td"><p>50</p></td> <td class="pricing_td font-weight-bold"><p>Unlimited</p></td> </tr> <tr class="pricing_row"> <th class="pricing_th">Conversations</th> <td class="pricing_td font-weight-bold"><p>Unlimited</p></td> <td class="pricing_td font-weight-bold"><p>Unlimited</p></td> <td class="pricing_td font-weight-bold"><p>Unlimited</p></td> <td class="pricing_td font-weight-bold"><p>Unlimited</p></td> </tr> <tr class="pricing_row"> <th class="pricing_th">Desktop and Mobile Apps</th> <td class="pricing_td"> <p>✔</p> </td> <td class="pricing_td"> <p>✔</p> </td> <td class="pricing_td"> <p>✔</p> </td> <td class="pricing_td"> <p>✔</p> </td> </tr> <tr class="pricing_row"> <th class="pricing_th">Notifications (Mobile + Email)</th> <td class="pricing_td"></td> <td class="pricing_td"> <p>✔</p> </td> <td class="pricing_td"> <p>✔</p> </td> <td class="pricing_td"> <p>✔</p> </td> </tr> <tr class="pricing_row"> <th class="pricing_th pricing_th--new">Invisible mode</th> <td class="pricing_td"> </td> <td class="pricing_td"> <p>✔</p> </td> <td class="pricing_td"> <p>✔</p> </td> <td class="pricing_td"> <p>✔</p> </td> </tr> <tr class="pricing_row"> <th class="pricing_th pricing_th--new">Search engine</th> <td class="pricing_td"> </td> <td class="pricing_td"> </td> <td class="pricing_td"> <p>✔</p> </td> <td class="pricing_td"> <p>✔</p> </td> </tr> <tr class="pricing_row"> <th class="pricing_th pricing_th--new">User Database</th> <td class="pricing_td"> </td> <td class="pricing_td"> </td> <td class="pricing_td"> <p>✔</p> </td> <td class="pricing_td"> <p>✔</p> </td> </tr> <tr class="pricing_row"> <th class="pricing_th">User Import/Export</th> <td class="pricing_td"> </td> <td class="pricing_td"> </td> <td class="pricing_td"> <p>✔</p> </td> <td class="pricing_td"> <p>✔</p> </td> </tr> <tr class="pricing_row"> <th class="pricing_th">Campaigns (Email + Chat)</th> <td class="pricing_td"><p>50 recipients</p></td> <td class="pricing_td"><p>1 000 recipients</p></td> <td class="pricing_td"><p>100 000 recipients</p></td> <td class="pricing_td"><p>200 000 recipients</p></td> </tr> <tr class="pricing_row"> <th class="pricing_th">Customization</th> <td class="pricing_td"><p>Basic</p></td> <td class="pricing_td"> <p>✔</p> </td> <td class="pricing_td"> <p>✔</p> </td> <td class="pricing_td"> <p>✔</p> </td> </tr> <tr class="pricing_btn-row"> <th class="pricing_th"></th> <td class="pricing_td"> <p><a href="#!" class="btn btn-block btn-outline-success">Select plan</a></p> </td> <td class="pricing_td"> <p><a target="_blank" href="http://totoprayogo.com" class="btn btn-block btn-danger">Select plan</a></p> </td> <td class="pricing_td"> <p><a href="#!" class="btn btn-block btn-outline-secondary">Select plan</a></p> </td> <td class="pricing_td"> <p><a href="#!" class="btn btn-block btn-outline-primary">Select plan</a></p> </td> </tr> </tbody> </table> </div> <div class="text-muted mt-5 mb-5 text-center small">by : <a class="text-muted" target="_blank" href="http://totoprayogo.com">totoprayogo.com</a></div>

.body { background: #ddd; } .pricing_head th, .pricing_td { text-align: center; } .pricing_head th > p { font-size: 1.5em; font-weight: 400; } .pricing_head .accent { color: red; } .pricing_head .other-color-1 { color: green; } .pricing_head .other-color-2 { color: gray; } .pricing_head .other-color-3 { color: blue; }