bs4 beta pricing

This bootstrap snippet called "bs4 beta pricing" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: pricing,table

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container">
    <div class="row text-center">
        <div class="col-lg-3">
            <div class="card plan-card">
                <div class="card-block">
                    <div class="pt-3 pb-3">
                        <h1><i class="fa fa-plane plan-icon"></i></h1>
                        <h6 class="text-uppercase text-primary">Starter Pack</h6>
                    </div>
                    <div>
                        <h1 class="plan-price padding-b-15">$19<span class="text-muted m-l-10"><sup>Per Month</sup></span></h1>
                        <div class="plan-div-border"></div>
                    </div>
                    <div class="plan-features pb-3 mt-3 text-muted padding-t-b-30">
                        <p>Free Live Support</p>
                        <p>Unlimited User</p>
                        <p>No Time Tracking</p>
                        <p>Free Setup</p>
                        <a href="#" class="btn btn-primary">Sign Up Now</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="card plan-card">
                <div class="card-block">
                    <div class="pt-3 pb-3">
                        <h1><i class="fa fa-trophy plan-icon bg-dark"></i></h1>
                        <h6 class="text-uppercase text-dark">Professional Pack</h6>
                    </div>
                    <div>
                        <h1 class="plan-price padding-b-15">$29<span class="text-muted m-l-10"><sup>Per Month</sup></span></h1>
                        <div class="plan-div-border"></div>
                    </div>
                    <div class="plan-features pb-3 mt-3 text-muted padding-t-b-30">
                        <p>Free Live Support</p>
                        <p>Unlimited User</p>
                        <p>No Time Tracking</p>
                        <p>Free Setup</p>
                        <a href="#" class="btn btn-dark">Sign Up Now</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3">
            <div class="card plan-card">
                <div class="card-block">
                    <div class="pt-3 pb-3">
                        <h1><i class="fa fa-umbrella plan-icon bg-pink"></i></h1>
                        <h6 class="text-uppercase text-pink">Enterprise Pack</h6>
                    </div>
                    <div>
                        <h1 class="plan-price padding-b-15">$39<span class="text-muted m-l-10"><sup>Per Month</sup></span></h1>
                        <div class="plan-div-border"></div>
                    </div>
                    <div class="plan-features pb-3 mt-3 text-muted padding-t-b-30">
                        <p>Free Live Support</p>
                        <p>Unlimited User</p>
                        <p>No Time Tracking</p>
                        <p>Free Setup</p>
                        <a href="#" class="btn btn-pink">Sign Up Now</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3">
            <div class="card plan-card">
                <div class="card-block">
                    <div class="pt-3 pb-3">
                        <h1><i class="fa fa-cube plan-icon bg-teal"></i></h1>
                        <h6 class="text-uppercase text-teal">Unlimited Pack</h6>
                    </div>
                    <div>
                        <h1 class="plan-price padding-b-15">$49<span class="text-muted m-l-10"><sup>Per Month</sup></span></h1>
                        <div class="plan-div-border"></div>
                    </div>
                    <div class="plan-features pb-3 mt-3 text-muted padding-t-b-30">
                        <p>Free Live Support</p>
                        <p>Unlimited User</p>
                        <p>No Time Tracking</p>
                        <p>Free Setup</p>
                        <a href="#" class="btn btn-teal">Sign Up Now</a>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

body {
    margin-top: 20px;
}


/* ==============
  Pricing
===================*/

.plan-card .plan-icon {
    display: inline-block;
    font-size: 35px;
    width: 100px;
    height: 100px;
    color: #ffffff;
    line-height: 76px;
    overflow: hidden;
    border: 12px solid #ffffff;
    border-radius: 50%;
    background: #67a8e4;
    box-shadow: 0 0 3px #cccccc;
    transition: all .3s;
}

.plan-card .plan-price span {
    font-size: 15px;
    vertical-align: middle;
}

.plan-card .plan-features p {
    line-height: 32px;
}

.bg-pink {
    background-color: #f06292 !important;
}

.bg-teal {
    background-color: #009688 !important;
}

.text-pink {
    color: #f06292 !important;
}

.text-teal {
    color: #009688 !important;
}

.btn-pink {
    background-color: #f06292;
    border: 1px solid #f06292;
    color: #ffffff;
}

.btn-teal {
    background-color: #009688;
    border: 1px solid #009688;
    color: #ffffff;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 4.0.0-beta

Created: Sep 19th 2017, 18:54

Views: 1.6K

Rated 5/5 based on 2 reviews