" "Responsive Price Table""
Bootstrap 4.1.1 Snippet by Pawan Pandey

<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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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"> <div class="row row-flex"> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <div class="price-table pt-bg-black"> <div> <span>basic</span> <span>Price $99.99/mo</span> <span>Features included!</span> </div> <ul> <li>Domain name</li> <li>Social Media Integration</li> <li>First Month Hosting</li> <li>On Page SEO</li> <li>24/6 Support</li> </ul> <a href="#">purchase</a> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <div class="price-table pt-bg-green"> <div> <span>basic</span> <span>Price $99.99/mo</span> <span>Features included!</span> </div> <ul> <li>Domain name</li> <li>Social Media Integration</li> <li>First Month Hosting</li> <li>On Page SEO</li> <li>24/6 Support</li> </ul> <a href="#">purchase</a> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <div class="price-table pt-bg-red"> <div> <span>basic</span> <span>Price $99.99/mo</span> <span>Features included!</span> </div> <ul> <li>Domain name</li> <li>Social Media Integration</li> <li>First Month Hosting</li> <li>On Page SEO</li> <li>24/6 Support</li> </ul> <a href="#">purchase</a> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <div class="price-table pt-bg-blue"> <div> <span>basic</span> <span>Price $99.99/mo</span> <span>Features included!</span> </div> <ul> <li>Domain name</li> <li>Social Media Integration</li> <li>First Month Hosting</li> <li>On Page SEO</li> <li>24/6 Support</li> </ul> <a href="#">purchase</a> </div> </div> </div> </div>
/* PRICE TABLE */ .row-flex { display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; -moz-flex-wrap: wrap; } .price-table { max-width: 400px; min-height: 320px; background-color: #fff; border-radius: 0 0 0 25px; border: 1px solid #ccc; box-shadow: 5px 5px 8px #ccc; display: block; margin: 10px auto; padding: 0 0 8px 0; text-align: center; } .price-table span { display: block; } .price-table span:first-child { padding: 16px 0 0 0; font-size: 2em; text-transform: uppercase; font-weight: bold; } .price-table span:nth-child(2) { padding: 0 0 16px 0; } .price-table span:nth-child(3) { padding: 8px 0; font-weight: bold; font-size: 1.2em; } .price-table > ul { list-style: none; display: block; padding: 0; margin: 0; } .price-table > ul > li { display: block; padding: 8px 0; } .price-table > ul > li:first-child { border-top: 1px solid #ccc; } .price-table > ul > li { border-bottom: 1px solid #ccc; } .price-table a, .price-table a:active, .price-table a:focus, .price-table a:hover, .price-table a:visited { text-transform: uppercase; display: inline-block; padding: 8px 16px; text-decoration: none; font-weight: bold; transition-duration: .2s; } /* Colors */ .pt-bg-black span:first-child { background-color: #212121; color: #fcfcfc; } .pt-bg-black span:nth-child(2) { background-color: #212121; color: #D5D8DC; } .pt-bg-black a { border: 3px solid #212121; color: #212121; margin-top: 8px; } .pt-bg-black a:hover { background-color: #212121; color: #fff; } /* End Color Black */ .pt-bg-green span:first-child { background-color: #27AE60; color: #fcfcfc; } .pt-bg-green span:nth-child(2) { background-color: #27AE60; color: #D5D8DC; } .pt-bg-green a { border: 3px solid #27AE60; color: #27AE60; margin-top: 8px; } .pt-bg-green a:hover { background-color: #27AE60; color: #fff; } /* End Color Green */ .pt-bg-red span:first-child { background-color: #C0392B; color: #fcfcfc; } .pt-bg-red span:nth-child(2) { background-color: #C0392B; color: #D5D8DC; } .pt-bg-red a { border: 3px solid #C0392B; color: #C0392B; margin-top: 8px; } .pt-bg-red a:hover { background-color: #C0392B; color: #fff; } /* End Color Red */ .pt-bg-blue span:first-child { background-color: #2980B9; color: #fcfcfc; } .pt-bg-blue span:nth-child(2) { background-color: #2980B9; color: #D5D8DC; } .pt-bg-blue a { border: 3px solid #2980B9; color: #2980B9; margin-top: 8px; } .pt-bg-blue a:hover { background-color: #2980B9; color: #fff; } /* End Color Blue */ /* END PRICE TABLE */

Related: See More


Questions / Comments:

Hi There,

We are having issues with our pricing table with the link below https://www.dtapclinic.com/hiv/hiv-testing/ and its not mobile responsive. Please have a look this link with mobile devices

We are looking for some solution if there is any possibility to fix this on mobile devices. We are using wordpress by the way. Looking forward to the suggestions.

Thanks.

robkesper () - 5 years ago - Reply 0