<tutorialjinni.com/>

BootStrap 4 Responsive Simple Pricing Table

Posted Under: Bootstrap, Responsive, Table, Template on Nov 18, 2018
Bootstrap 4 Simple and clean Pricing Table Template. Bootstarp 4 Pricing Table

You might like Bootstrap 4 Responsive Pricing Table too.


Source Code

<html>
    <head>
        <title>BootStrap 4 Simple & Clean Pricing table</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <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="//cdn.tutorialjinni.com/jquery/3.2.1/jquery.min.js"></script>
        <style>
            .card-pricing.popular {
                z-index: 1;
                border: 3px solid #007bff;
            }
            .card-pricing .list-unstyled li {
                padding: .5rem 0;
                color: #6c757d;
            }
        </style>
    </head>
    <body>
        <div class="container mb-5 mt-5">
            <div class="pricing card-deck flex-column flex-md-row mb-3">
                <div class="card card-pricing text-center px-3 mb-4">
                    <span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Starter</span>
                    <div class="bg-transparent card-header pt-4 border-0">
                        <h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="15">$<span class="price">3</span><span class="h6 text-muted ml-2">/ per month</span></h1>
                    </div>
                    <div class="card-body pt-0">
                        <ul class="list-unstyled mb-4">
                            <li>Up to 5 users</li>
                            <li>Basic support on Github</li>
                            <li>Monthly updates</li>
                            <li>Free cancelation</li>
                        </ul>
                        <button type="button" class="btn btn-outline-secondary mb-3">Order now</button>
                    </div>
                </div>
                <div class="card card-pricing popular shadow text-center px-3 mb-4">
                    <span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Professional</span>
                    <div class="bg-transparent card-header pt-4 border-0">
                        <h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="30">$<span class="price">6</span><span class="h6 text-muted ml-2">/ per month</span></h1>
                    </div>
                    <div class="card-body pt-0">
                        <ul class="list-unstyled mb-4">
                            <li>Up to 5 users</li>
                            <li>Basic support on Github</li>
                            <li>Monthly updates</li>
                            <li>Free cancelation</li>
                        </ul>
                        <a href="https://www.totoprayogo.com" target="_blank" class="btn btn-primary mb-3">Order Now</a>
                    </div>
                </div>
                <div class="card card-pricing text-center px-3 mb-4">
                    <span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Business</span>
                    <div class="bg-transparent card-header pt-4 border-0">
                        <h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="45">$<span class="price">9</span><span class="h6 text-muted ml-2">/ per month</span></h1>
                    </div>
                    <div class="card-body pt-0">
                        <ul class="list-unstyled mb-4">
                            <li>Up to 5 users</li>
                            <li>Basic support on Github</li>
                            <li>Monthly updates</li>
                            <li>Free cancelation</li>
                        </ul>
                        <button type="button" class="btn btn-outline-secondary mb-3">Order now</button>
                    </div>
                </div>
                <div class="card card-pricing text-center px-3 mb-4">
                    <span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Enterprise</span>
                    <div class="bg-transparent card-header pt-4 border-0">
                        <h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="60">$<span class="price">12</span><span class="h6 text-muted ml-2">/ per month</span></h1>
                    </div>
                    <div class="card-body pt-0">
                        <ul class="list-unstyled mb-4">
                            <li>Up to 5 users</li>
                            <li>Basic support on Github</li>
                            <li>Monthly updates</li>
                            <li>Free cancelation</li>
                        </ul>
                        <button type="button" class="btn btn-outline-secondary mb-3">Order now</button>
                    </div>
                </div>
            </div>
        </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>
</html>


imgae