"Bootstrap 4 Pricing Cards"
Bootstrap 4.1.1 Snippet by themesberg

Post to Facebook Tweet this

<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/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/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 ----------> <!doctype html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" type="text/css"> <link rel="stylesheet" href="https://demo.themesberg.com/pixel-pro/css/pixel.css" type="text/css"> </head> <body> <div class="section section-md py-5"> <div class="container"> <!-- Title --> <div class="row"> <div class="col-md-4 text-center mx-auto"> <div class="mb-5"> <a href="https://themesberg.com"> <img src="https://themesberg.com/img/brand/themesberg-logo.svg" alt="Logo Themesberg Light" class="mb-4" style="width: 75px;"> <h1 class="h3 mb-4">Themesberg</h1> </a> <h6 class="font-weight-bold"> <a href="https://themesberg.com/product/ui-kits/pixel-pro-premium-bootstrap-4-ui-kit" target="_blank" class="btn mr-2 mb-2 btn-tertiary animate-up-2">Get pricing cards</a> </h6> </div> </div> </div> <div class="row mt-4"> <div class="col-md-12 mx-auto"> <!-- Section title--> <div class="row"> <div class="col-md-4"> <div class="mb-5"> <h6 class="font-weight-bold">Pricing Card 1</h6> </div> </div> </div> <!--End section title--> <div class="row"> <div class="col-md-6 col-lg-4"> <!-- Pricing Card --> <div class="pricing-card"> <div class="card shadow-sm border-light text-center mt-1"> <!-- Header --> <header class="card-header bg-white p-3"> <h2 class="h5 text-primary mb-4">Basic</h2> <span class="d-block"> <span class="display-1 text-dark font-weight-bold"> <span class="align-top font-medium">$</span>19 </span> <span class="d-block text-light font-small">/ month</span> </span> </header> <!-- End Header --> <!-- Content --> <div class="card-body"> <ul class="list-group mb-4"> <li class="list-group-item"><strong>1</strong> free domain</li> <li class="list-group-item">Storage space: <strong>5GB</strong></li> <li class="list-group-item"><strong>100k</strong> monthly visitors</li> <li class="list-group-item">One-click staging site</li> <li class="list-group-item">Search engine wizard </li> <li class="list-group-item">Community support</li> </ul> <button type="button" class="btn btn-primary btn-block animate-up-1" tabindex="0">Start Starter</button> </div> <!-- End Content --> </div> </div> <!-- End of Pricing Card --> </div> <div class="col-md-6 col-lg-4"> <!-- Pricing Card --> <div class="pricing-card"> <div class="card shadow-sm border-light text-center mt-1"> <!-- Header --> <header class="card-header bg-white p-3"> <h2 class="h5 text-secondary mb-4">Deluxe</h2> <span class="d-block"> <span class="display-1 text-dark font-weight-bold"> <span class="align-top font-medium">$</span>49 </span> <span class="d-block text-light font-small">/ month</span> </span> </header> <!-- End Header --> <!-- Content --> <div class="card-body"> <ul class="list-group mb-4"> <li class="list-group-item"><strong>3</strong> free domain</li> <li class="list-group-item">Storage space: <strong>25GB</strong></li> <li class="list-group-item"><strong>400k</strong> monthly visitors</li> <li class="list-group-item">SSH/SFTP access</li> <li class="list-group-item">Free SSL Certificate </li> <li class="list-group-item">Community support</li> </ul> <button type="button" class="btn btn-secondary btn-block animate-up-1" tabindex="0">Start Deluxe</button> </div> <!-- End Content --> </div> </div> <!-- End of Pricing Card --> </div> <div class="col-md-6 col-lg-4"> <!-- Pricing Card --> <div class="pricing-card"> <div class="card shadow-sm border-light text-center mt-1"> <!-- Header --> <header class="card-header bg-white p-3"> <h2 class="h5 text-tertiary mb-4">Ultimate</h2> <span class="d-block"> <span class="display-1 text-dark font-weight-bold"> <span class="align-top font-medium">$</span>89 </span> <span class="d-block text-light font-small">/ month</span> </span> </header> <!-- End Header --> <!-- Content --> <div class="card-body"> <ul class="list-group mb-4"> <li class="list-group-item"><strong>5</strong> free domain</li> <li class="list-group-item">Storage space: <strong>50GB</strong></li> <li class="list-group-item"><strong>1m+</strong> monthly visitors</li> <li class="list-group-item">Free site-maintenance </li> <li class="list-group-item"><strong>5-50</strong>websites</li> <li class="list-group-item">Community support+</li> </ul> <button type="button" class="btn btn-tertiary btn-block animate-up-1" tabindex="0">Start Ultimate</button> </div> <!-- End Content --> </div> </div> <!-- End of Pricing Card --> </div> </div> <!-- Section title--> <div class="row"> <div class="col-md-4"> <div class="mt-5 mb-5"> <h6 class="font-weight-bold">Pricing Card 2</h6> </div> </div> </div> <!--End section title--> <div class="row"> <div class="col-md-6 col-lg-4"> <!-- Pricing Card --> <div class="pricing-card"> <div class="card shadow-soft border-light p-4"> <!-- Header --> <header class="card-header border-bottom bg-white text-center"> <span class="d-block"> <span class="display-1 text-primary font-weight-bold"> <span class="align-top font-medium">$</span>19 </span> <span class="text-light font-small">/ month</span> </span> </header> <!-- End Header --> <!-- Content --> <div class="card-body"> <p>Faster sites deliver better business results for your clients.</p> <ul class="list-group mb-4"> <li class="list-group-item"><strong>Full Support</strong> No</li> <li class="list-group-item"><strong>Storage</strong> 50 GB</li> <li class="list-group-item"><strong>Monthly Visitors</strong> 400k</li> </ul> <button type="button" class="btn btn-outline-primary btn-block" tabindex="0"><span class="fas fa-cart-plus mr-3"></span>Add to Cart</button> </div> <!-- End Content --> </div> </div> <!-- End of Pricing Card --> </div> <div class="col-md-6 col-lg-4"> <!-- Pricing Card --> <div class="pricing-card"> <div class="card shadow-soft border-light p-4"> <!-- Header --> <header class="card-header border-bottom bg-white text-center"> <span class="d-block"> <span class="display-1 text-secondary font-weight-bold"> <span class="align-top font-medium">$</span>39 </span> <span class="text-light font-small">/ month</span> </span> </header> <!-- End Header --> <!-- Content --> <div class="card-body"> <p>Faster sites deliver better business results for your clients.</p> <ul class="list-group mb-4"> <li class="list-group-item"><strong>Full Support</strong> Yes</li> <li class="list-group-item"><strong>Storage</strong> 100 GB</li> <li class="list-group-item"><strong>Monthly Visitors</strong> 800k</li> </ul> <button type="button" class="btn btn-outline-secondary btn-block" tabindex="0"><span class="fas fa-cart-plus mr-3"></span>Add to Cart</button> </div> <!-- End Content --> </div> </div> <!-- End of Pricing Card --> </div> <div class="col-md-6 col-lg-4"> <!-- Pricing Card --> <div class="pricing-card"> <div class="card shadow-soft border-light p-4"> <!-- Header --> <header class="card-header border-bottom bg-white text-center"> <span class="d-block"> <span class="display-1 text-tertiary font-weight-bold"> <span class="align-top font-medium">$</span>79 </span> <span class="text-light font-small">/ month</span> </span> </header> <!-- End Header --> <!-- Content --> <div class="card-body"> <p>Faster sites deliver better business results for your clients.</p> <ul class="list-group mb-4"> <li class="list-group-item"><strong>Full Support</strong> Yes</li> <li class="list-group-item"><strong>Storage</strong> 400 GB</li> <li class="list-group-item"><strong>Monthly Visitors</strong> 1m+</li> </ul> <button type="button" class="btn btn-outline-tertiary btn-block" tabindex="0"><span class="fas fa-cart-plus mr-3"></span>Add to Cart</button> </div> <!-- End Content --> </div> </div> <!-- End of Pricing Card --> </div> </div> <!-- Section title--> <div class="row"> <div class="col-md-4"> <div class="mt-5 mb-5"> <h6 class="font-weight-bold">Pricing Card 3</h6> </div> </div> </div> <!--End section title--> <div class="row"> <div class="col-md-6 col-lg-4"> <!-- Pricing Card --> <div class="pricing-card"> <div class="card section-image overlay-dark text-white border-0 p-3" data-background="https://demo.themesberg.com/pixel-pro/assets/img/pricing/pricing-3.jpg"> <!-- Header --> <header class="card-header p-3"> <span class="icon mb-4"><i class="far fa-money-bill-alt"></i></span> <span class="d-block"> <span class="display-1 font-weight-bold"> 19<span class="align-baseline font-medium">$</span> </span> <span class="font-small">/ month</span> </span> </header> <!-- End Header --> <!-- Content --> <div class="card-body p-2"> <ul class="list-group mb-4"> <li class="list-group-item"><i class="far fa-lightbulb"></i>Community support </li> <li class="list-group-item"><i class="far fa-hdd"></i>15 GB SSD storage</li> <li class="list-group-item"><i class="far fa-paper-plane"></i>One-click staging site </li> <li class="list-group-item"><i class="far fa-envelope"></i>10 E-mail accounts </li> <li class="list-group-item"><i class="far fa-id-badge"></i>2 Bootstrap Themes </li> </ul> <button type="button" class="btn btn-secondary btn-block animate-up-2" tabindex="0">Add to Cart</button> </div> <!-- End Content --> </div> </div> </div> <div class="col-md-6 col-lg-4"> <!-- Pricing Card --> <div class="pricing-card"> <div class="card section-image overlay-dark text-white border-0 p-3" data-background="https://demo.themesberg.com/pixel-pro/assets/img/pricing/pricing-2.jpg"> <!-- Header --> <header class="card-header p-3"> <span class="icon mb-4"><i class="far fa-star"></i></span> <span class="d-block"> <span class="display-1 font-weight-bold"> 79<span class="align-baseline font-medium">$</span> </span> <span class="font-small">/ month</span> </span> </header> <!-- End Header --> <!-- Content --> <div class="card-body p-2"> <ul class="list-group mb-4"> <li class="list-group-item"><i class="far fa-lightbulb"></i>Premium support </li> <li class="list-group-item"><i class="far fa-hdd"></i>150 GB SSD storage </li> <li class="list-group-item"><i class="far fa-paper-plane"></i>5 Wordpress Templates </li> <li class="list-group-item"><i class="far fa-envelope"></i>50 E-mail accounts </li> <li class="list-group-item"><i class="far fa-id-badge"></i>10+ Bootstrap Themes</li> </ul> <button type="button" class="btn btn-secondary btn-block animate-up-2" tabindex="0">Add to Cart</button> </div> <!-- End Content --> </div> </div> </div> <div class="col-md-6 col-lg-4"> <!-- Pricing Card --> <div class="pricing-card"> <div class="card section-image overlay-dark text-white border-0 p-3" data-background="https://demo.themesberg.com/pixel-pro/assets/img/pricing/pricing-1.jpg"> <!-- Header --> <header class="card-header p-3"> <span class="icon mb-4"><i class="far fa-handshake"></i></span> <span class="d-block"> <span class="display-1 font-weight-bold"> 39<span class="align-baseline font-medium">$</span> </span> <span class="font-small">/ month</span> </span> </header> <!-- End Header --> <!-- Content --> <div class="card-body p-2"> <ul class="list-group mb-4"> <li class="list-group-item"><i class="far fa-lightbulb"></i>Community support </li> <li class="list-group-item"><i class="far fa-hdd"></i>50 GB SSD storage </li> <li class="list-group-item"><i class="far fa-paper-plane"></i>One-click staging site </li> <li class="list-group-item"><i class="far fa-envelope"></i>20 E-mail accounts</li> <li class="list-group-item"><i class="far fa-id-badge"></i>5 Bootstrap Themes</li> </ul> <button type="button" class="btn btn-secondary btn-block animate-up-2" tabindex="0">Add to Cart</button> </div> <!-- End Content --> </div> </div> <!-- End of Pricing Card --> </div> </div> <!-- Section title--> <div class="row"> <div class="col-md-4"> <div class="mt-5 mb-5"> <h6 class="font-weight-bold">Pricing Card 4</h6> </div> </div> </div> <!--End section title--> <div class="row"> <div class="col-md-12 col-lg-6"> <!-- Pricing Card --> <div class="pricing-card"> <div class="card shadow-soft border-light"> <div class="row no-gutters align-items-center"> <div class="col-sm-5"> <!-- Header --> <header class="card-header text-center"> <h2 class="h5 text-primary mb-0">Basic</h2> <span class="d-block my-3"> <span class="display-2 font-weight-bold"><span class="align-baseline font-medium">$</span>19 </span> </span> <button type="button" class="btn btn-sm btn-outline-gray btn-block" tabindex="0">Add to Cart</button> </header> </div> <div class="col-sm-7"> <!-- Content --> <div class="card-body"> <ul class="list-group simple-list"> <li class="list-group-item"><i class="far fa-lightbulb"></i>Basic support </li> <li class="list-group-item"><i class="far fa-hdd"></i>15 GB SSD storage</li> <li class="list-group-item"><i class="far fa-paper-plane"></i>SSH/SFTP access </li> <li class="list-group-item"><i class="far fa-envelope"></i>5 E-mail accounts </li> <li class="list-group-item"><i class="far fa-id-badge"></i>2 Bootstrap Themes </li> </ul> </div> <!-- End Content --> </div> </div> </div> </div> <!-- End of Pricing Card --> </div> <div class="col-md-12 col-lg-6"> <!-- Pricing Card --> <div class="pricing-card"> <div class="card shadow-soft border-light"> <div class="row no-gutters align-items-center"> <div class="col-sm-5"> <!-- Header --> <header class="card-header text-center"> <h2 class="h5 text-secondary mb-0">Pro</h2> <span class="d-block my-3"> <span class="display-2 font-weight-bold"><span class="align-baseline font-medium">$</span>79 </span> </span> <button type="button" class="btn btn-sm btn-outline-gray btn-block" tabindex="0">Add to Cart</button> </header> </div> <div class="col-sm-7"> <!-- Content --> <div class="card-body"> <ul class="list-group simple-list"> <li class="list-group-item"><i class="far fa-lightbulb"></i>Premium support </li> <li class="list-group-item"><i class="far fa-hdd"></i>150 GB SSD storage </li> <li class="list-group-item"><i class="far fa-paper-plane"></i>SSL Certificate </li> <li class="list-group-item"><i class="far fa-envelope"></i>50 E-mail accounts </li> <li class="list-group-item"><i class="far fa-id-badge"></i>10+ Bootstrap Themes</li> </ul> </div> <!-- End Content --> </div> </div> </div> </div> <!-- End of Pricing Card --> </div> </div> <!-- Section title--> <div class="row"> <div class="col-md-4"> <div class="mt-5 mb-5"> <h6 class="font-weight-bold">Pricing Style 5</h6> </div> </div> </div> <!--End section title--> <!-- Tab --> <div class="pixel-tab"> <div class="row mt-5"> <div class="col-lg-2 col-md-3 align-self-center"> <!-- Nav --> <div class="nav nav-pills nav-fill flex-column" role="tablist"> <a class="nav-link active" data-toggle="pill" href="#tabb-1" role="tab" aria-expanded="true"> <h2>$0</h2> <h6 class="subtitle">Free</h6> </a> <a class="nav-link" data-toggle="pill" href="#tabb-2" role="tab" aria-expanded="true"> <h2>$10<small>/m</small></h2> <h6 class="subtitle">Regular</h6> </a> <a class="nav-link" data-toggle="pill" href="#tabb-3" role="tab" aria-expanded="true"> <h2>$30<small>/m</small></h2> <h6 class="subtitle">Premium</h6> </a> </div> <!-- End of Nav --> </div> <div class="col-lg-10 col-md-9"> <div class="tab-content"> <div class="tab-pane fade active show" id="tabb-1" role="tabpanel"> <div class="row no-gutters"> <!-- Price Tab --> <div class="col-lg-7"> <div class="pricing-box"> <h2 class="mb-0">Free Plan</h2> <p>This plan is perfect for students and small teams to build personal projects. </p> <ul class="list-inline mb-4"> <li><i class="far fa-address-card"></i><span>Personal License</span></li> <li><i class="far fa-paper-plane"></i><span>5 Demos Included</span></li> <li><i class="far fa-file-code"></i><span>2 Bootstrap Themes</span></li> <li><i class="far fa-hdd"></i><span>10 GB Hosting</span></li> <li><i class="far fa-lightbulb"></i><span>Newsletter</span></li> <li><i class="far fa-grin-hearts"></i><span>Free Support</span></li> </ul> <a href="#" class="btn btn-block btn-secondary">Add to Cart</a> </div> </div> <!-- Image & Description --> <div class="col-lg-5 bg-image overlay-dark text-center align-items-center" data-background="https://demo.themesberg.com/pixel-pro/assets/img/pricing/pricing-1.jpg"> <div class="description-box text-white p-3 p-sm-2"> <span class="display-3 align-middle">$0</span> <p class="lead mt-2">If you want to try Pixel before committing to an active monthly plan, then you can sign up for a free 30-day trial.</p> </div> </div> <!-- /Image & Description --> </div> </div> <div class="tab-pane fade" id="tabb-2" role="tabpanel"> <div class="row no-gutters"> <!-- Price Tab --> <div class="col-lg-7"> <div class="pricing-box"> <h2 class="mb-0">Regular Plan</h2> <p>This plan is perfect for students and small teams to build personal projects. </p> <ul class="list-inline mb-4"> <li><i class="far fa-address-card"></i><span>Personal License</span></li> <li><i class="far fa-paper-plane"></i><span>20 Demos Included</span></li> <li><i class="far fa-file-code"></i><span>10 Bootstrap Themes</span></li> <li><i class="far fa-hdd"></i><span>100 GB Hosting</span></li> <li><i class="far fa-lightbulb"></i><span>Newsletter</span></li> <li><i class="far fa-grin-hearts"></i><span>Free Support</span></li> </ul> <a href="#" class="btn btn-block btn-secondary">Add to Cart</a> </div> </div> <!-- Image & Description --> <div class="col-lg-5 bg-image overlay-dark text-center align-items-center" data-background="https://demo.themesberg.com/pixel-pro/assets/img/pricing/pricing-1.jpg"> <div class="description-box text-white p-3 p-sm-2"> <span class="display-3 align-middle">$10/month</span> <p class="lead mt-2">Build a unique website with advanced design tools, CSS snippets and the ability to monetize your site.</p> </div> </div> <!-- /Image & Description --> </div> </div> <div class="tab-pane fade" id="tabb-3" role="tabpanel"> <div class="row no-gutters"> <!-- Price Tab --> <div class="col-lg-7"> <div class="pricing-box"> <h2 class="mb-0">Premium Plan</h2> <p>This plan is perfect for students and small teams to build personal projects. </p> <ul class="list-inline mb-4"> <li><i class="far fa-address-card"></i><span>Commercial License</span></li> <li><i class="far fa-paper-plane"></i><span>All Demos Included</span></li> <li><i class="far fa-file-code"></i><span>All Bootstrap Themes</span></li> <li><i class="far fa-hdd"></i><span>5 TB Hosting</span></li> <li><i class="far fa-lightbulb"></i><span>Newsletter</span></li> <li><i class="far fa-grin-hearts"></i><span>Free Support</span></li> </ul> <a href="#" class="btn btn-block btn-secondary">Add to Cart</a> </div> </div> <!-- Image & Description --> <div class="col-lg-5 bg-image overlay-dark text-center align-items-center" data-background="/img/pricing/pricing-1.jpg"> <div class="description-box text-white p-3 p-sm-2"> <span class="display-3 align-middle">$30/month</span> <p class="lead mt-2">Power your business website with unlimited premium and business theme templates.</p> </div> </div> <!-- /Image & Description --> </div> </div> </div> </div> </div> </div> <!-- End of tab --> <!-- Section title--> <div class="row"> <div class="col-md-4"> <div class="mt-5 mb-5"> <h6 class="font-weight-bold">Pricing Card 6</h6> </div> </div> </div> <!--End section title--> <div class="row"> <div class="col-md-6 col-lg-4"> <!-- Pricing Card --> <div class="pricing-card animate-up-3"> <div class="card shadow-sm border-primary p-0"> <!-- Header --> <header class="card-header"> <h2 class="h5 text-primary mb-3">Basic</h2> <span class="d-block"> <span class="display-1 text-primary font-weight-bold"> <span class="align-top font-medium">$</span>19 </span> <span class="d-block text-light font-small">/ month</span> </span> </header> <!-- End Header --> <!-- Content --> <div class="card-body p-0"> <p class="p-3">Our Website Backup automatically backs up your data – every day. And in worst-case scenarios, if disaster strikes, you can restore your data fast.</p> <button type="button" class="btn btn-primary btn-block rounded-0" tabindex="0">Add to Cart</button> </div> <!-- End Content --> </div> </div> <!-- End of Pricing Card --> </div> <div class="col-md-6 col-lg-4"> <!-- Pricing Card --> <div class="pricing-card animate-up-3"> <div class="card shadow-sm border-secondary p-0"> <!-- Header --> <header class="card-header"> <h2 class="h5 text-secondary mb-3">Regular</h2> <span class="d-block"> <span class="display-1 text-secondary font-weight-bold"> <span class="align-top font-medium">$</span>39 </span> <span class="d-block text-light font-small">/ month</span> </span> </header> <!-- End Header --> <!-- Content --> <div class="card-body p-0"> <p class="p-3">So, get Website Backup and stop worrying about data loss. Get back to doing what you do best – running your business and making money.</p> <button type="button" class="btn btn-secondary btn-block rounded-0" tabindex="0">Add to Cart</button> </div> <!-- End Content --> </div> </div> <!-- End of Pricing Card --> </div> <div class="col-md-6 col-lg-4"> <!-- Pricing Card --> <div class="pricing-card animate-up-3"> <div class="card shadow-sm border-tertiary p-0"> <!-- Header --> <header class="card-header"> <h2 class="h5 text-tertiary mb-3">Premium</h2> <span class="d-block"> <span class="display-1 text-tertiary font-weight-bold"> <span class="align-top font-medium">$</span>79 </span> <span class="d-block text-light font-small">/ month</span> </span> </header> <!-- End Header --> <!-- Content --> <div class="card-body p-0"> <p class="p-3">It’s hard to believe anyone would want to harm your website, but they do. Thankfully, our security team is on the job 24/7 to meticulously monitor. </p> <button type="button" class="btn btn-tertiary btn-block rounded-0" tabindex="0">Add to Cart</button> </div> <!-- End Content --> </div> </div> <!-- End of Pricing Card --> </div> <div class="col-md-6 col-lg-4"> <!-- Pricing Card --> <div class="pricing-card animate-up-3 mt-3"> <div class="card shadow-sm border-dark p-0"> <!-- Header --> <header class="card-header"> <h2 class="h5 text-dark mb-3">Premium</h2> <span class="d-block"> <span class="display-1 text-dark font-weight-bold"> <span class="align-top font-medium">$</span>79 </span> <span class="d-block text-light font-small">/ month</span> </span> </header> <!-- End Header --> <!-- Content --> <div class="card-body p-0"> <p class="p-3">So, get Website Backup and stop worrying about data loss. Get back to doing what you do best – running your business and making money.</p> <button type="button" class="btn btn-dark btn-block rounded-0" tabindex="0">Add to Cart</button> </div> <!-- End Content --> </div> </div> <!-- End of Pricing Card --> </div> <div class="col-md-6 col-lg-4"> <!-- Pricing Card --> <div class="pricing-card animate-up-3 mt-3"> <div class="card shadow-sm border-gray p-0"> <!-- Header --> <header class="card-header"> <h2 class="h5 text-gray mb-3">Premium</h2> <span class="d-block"> <span class="display-1 text-gray font-weight-bold"> <span class="align-top font-medium">$</span>79 </span> <span class="d-block text-light font-small">/ month</span> </span> </header> <!-- End Header --> <!-- Content --> <div class="card-body p-0"> <p class="p-3">It’s hard to believe anyone would want to harm your website, but they do. Thankfully, our security team is on the job 24/7 to meticulously monitor. </p> <button type="button" class="btn btn-gray btn-block rounded-0" tabindex="0">Add to Cart</button> </div> <!-- End Content --> </div> </div> <!-- End of Pricing Card --> </div> <div class="col-md-6 col-lg-4"> <!-- Pricing Card --> <div class="pricing-card animate-up-3 mt-3"> <div class="card shadow-sm border-light p-0"> <!-- Header --> <header class="card-header"> <h2 class="h5 text-gray mb-3">Premium</h2> <span class="d-block"> <span class="display-1 text-gray font-weight-bold"> <span class="align-top font-medium">$</span>79 </span> <span class="d-block text-light font-small">/ month</span> </span> </header> <!-- End Header --> <!-- Content --> <div class="card-body p-0"> <p class="p-3">Our Website Backup automatically backs up your data – every day. And in worst-case scenarios, if disaster strikes, you can restore your data fast.</p> <button type="button" class="btn btn-light btn-block rounded-0" tabindex="0">Add to Cart</button> </div> <!-- End Content --> </div> </div> <!-- End of Pricing Card --> </div> </div> <!-- Section title--> <div class="row"> <div class="col-md-4"> <div class="mt-5 mb-5"> <h6 class="font-weight-bold">Background color variation</h6> </div> </div> </div> <!--End section title--> <div class="row"> <div class="col-md-6 col-lg-4"> <!-- Pricing Card --> <div class="pricing-card"> <div class="card bg-primary text-center text-white p-4"> <!-- Header --> <header class="card-header border-0"> <div class="pricing-value border-white"> <span class="display-2 font-weight-bold"> <span class="font-medium">$</span>79 </span> </div> </header> <!-- End Header --> <!-- Content --> <div class="card-body"> <ul class="list-group mb-4"> <li class="list-group-item">Community support</li> <li class="list-group-item">15 GB SSD storage</li> <li class="list-group-item">One-click staging site</li> </ul> <button type="button" class="btn btn-white btn-block text-primary font-weight-bold animate-up-2" tabindex="0"><span class="fas fa-cart-plus mr-3"></span>Add to Cart</button> </div> <!-- End Content --> </div> </div> <!-- End of Pricing Card --> </div> <div class="col-md-6 col-lg-4"> <!-- Pricing Card --> <div class="pricing-card"> <div class="card bg-secondary text-center text-white p-4"> <!-- Header --> <header class="card-header border-0"> <div class="pricing-value border-white"> <span class="display-2 font-weight-bold"> <span class="font-medium">$</span>79 </span> </div> </header> <!-- End Header --> <!-- Content --> <div class="card-body"> <ul class="list-group mb-4"> <li class="list-group-item">Community support</li> <li class="list-group-item">15 GB SSD storage</li> <li class="list-group-item">One-click staging site</li> </ul> <button type="button" class="btn btn-white btn-block text-secondary font-weight-bold animate-up-2" tabindex="0"><span class="fas fa-cart-plus mr-3"></span>Add to Cart</button> </div> <!-- End Content --> </div> </div> <!-- End of Pricing Card --> </div> <div class="col-md-6 col-lg-4"> <!-- Pricing Card --> <div class="pricing-card"> <div class="card bg-tertiary text-center text-white p-4"> <!-- Header --> <header class="card-header border-0"> <div class="pricing-value border-white"> <span class="display-2 font-weight-bold"> <span class="font-medium">$</span>79 </span> </div> </header> <!-- End Header --> <!-- Content --> <div class="card-body"> <ul class="list-group mb-4"> <li class="list-group-item">Community support</li> <li class="list-group-item">15 GB SSD storage</li> <li class="list-group-item">One-click staging site</li> </ul> <button type="button" class="btn btn-white btn-block text-tertiary font-weight-bold animate-up-2" tabindex="0"><span class="fas fa-cart-plus mr-3"></span>Add to Cart</button> </div> <!-- End Content --> </div> </div> <!-- End of Pricing Card --> </div> <div class="col-md-6 col-lg-4"> <!-- Pricing Card --> <div class="pricing-card mt-3"> <div class="card bg-dark text-center text-white p-4"> <!-- Header --> <header class="card-header border-0"> <div class="pricing-value border-white"> <span class="display-2 font-weight-bold"> <span class="font-medium">$</span>79 </span> </div> </header> <!-- End Header --> <!-- Content --> <div class="card-body"> <ul class="list-group mb-4"> <li class="list-group-item">Community support</li> <li class="list-group-item">15 GB SSD storage</li> <li class="list-group-item">One-click staging site</li> </ul> <button type="button" class="btn btn-white btn-block text-dark font-weight-bold animate-up-2" tabindex="0"><span class="fas fa-cart-plus mr-3"></span>Add to Cart</button> </div> <!-- End Content --> </div> </div> <!-- End of Pricing Card --> </div> <div class="col-md-6 col-lg-4"> <!-- Pricing Card --> <div class="pricing-card mt-3"> <div class="card bg-light text-center text-dark p-4"> <!-- Header --> <header class="card-header border-0"> <div class="pricing-value border-dark"> <span class="display-2 font-weight-bold"> <span class="font-medium">$</span>79 </span> </div> </header> <!-- End Header --> <!-- Content --> <div class="card-body"> <ul class="list-group mb-4"> <li class="list-group-item">Community support</li> <li class="list-group-item">15 GB SSD storage</li> <li class="list-group-item">One-click staging site</li> </ul> <button type="button" class="btn btn-white btn-block text-gray font-weight-bold animate-up-2" tabindex="0"><span class="fas fa-cart-plus mr-3"></span>Add to Cart</button> </div> <!-- End Content --> </div> </div> <!-- End of Pricing Card --> </div> <div class="col-md-6 col-lg-4"> <!-- Pricing Card --> <div class="pricing-card mt-3"> <div class="card bg-soft text-center text-dark p-4"> <!-- Header --> <header class="card-header border-0"> <div class="pricing-value border-dark"> <span class="display-2 font-weight-bold"> <span class="font-medium">$</span>79 </span> </div> </header> <!-- End Header --> <!-- Content --> <div class="card-body"> <ul class="list-group mb-4"> <li class="list-group-item">Community support</li> <li class="list-group-item">15 GB SSD storage</li> <li class="list-group-item">One-click staging site</li> </ul> <button type="button" class="btn btn-dark btn-block text-white font-weight-bold animate-up-2" tabindex="0"><span class="fas fa-cart-plus mr-3"></span>Add to Cart</button> </div> <!-- End Content --> </div> </div> <!-- End of Pricing Card --> </div> </div> </div> </div> </div> </div> <script type="text/javascript" src="https://demo.themesberg.com/pixel-pro/node_modules/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="https://demo.themesberg.com/pixel-pro/node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://demo.themesberg.com/pixel-pro/assets/js/pixel.js"></script> </body> </html>

Related: See More

Argon Design System
Information Cards
Responsive Data Cards (Bootstrap 4)
Bootstrap 4 and CCS3 Product Cards with Transition

Questions / Comments: