content logo
Bootstrap Tables: Bootstrap Pricing Table with Fade Effect

Using a pricing table can be the most important part of your site because your site audience will generate income for you when they are directed to this table and choose one of the plans, so you should choose a table that is remarkably beautiful. Like the pricing table below, in Hover mode for each plan, the rest of the plans fade, and the purchase button in Hover mode changes color to animated mode.

#Bootstrap Sortable Table # Bootstrap Table Pagination # Bootstrap Table Search # Bootstrap Table Export
<!-- this script got from www.frontendfreecode.com -->
<div class="best-plan"> <div class="container"> <div class="best-plan__head"> <div class="row"> <div class="col-md-12"> <h3 class="best-plan__title">Bootstrap Pricing Table with Fade Effect</h3> </div> </div> </div> <div class="b_plan_body"> <div class="row"> <div class="col-md-4 col-sm-4"> <!-- price plans item begin --> <div class="b-price-plan"> <div class="b-price-plan__item b-price-plan__head"> <h3>Standard</h3> </div> <div class="b-price-plan__item b-price-plan__cost"> <div class="cost-title">4<span>99</span></div> <div class="cost-time">Monthly</div> </div> <ul class="p_plan_list"> <li><i class="fa fa-laptop" aria-hidden="true"></i> 1 Site</li> <li><i class="fa fa-hdd-o" aria-hidden="true"></i> 1 GB Storage</li> <li><i class="fa fa-database" aria-hidden="true"></i> Database unlimited</li> <li><i class="fa fa-diamond" aria-hidden="true"></i> Free test</li> <li><i class="fa fa-cogs" aria-hidden="true"></i> Support 24 x 7</li> </ul> <div class="b-price-plan__item price_foot"> <a href="#" class="btn btn-warning price_btn"> <span>Buy now</span> <i class="fa fa-caret-right" aria-hidden="true"></i> </a> </div> </div> <!-- price plans item end --> </div> <div class="col-md-4 col-sm-4"> <!-- price plans item begin --> <div class="b-price-plan price-plan_pro"> <div class="b-price-plan__item b-price-plan__head"> <h3>Professional</h3> </div> <div class="b-price-plan__item b-price-plan__cost"> <div class="cost-title">12<span>99</span></div> <div class="cost-time">Monthly</div> </div> <ul class="p_plan_list"> <li><i class="fa fa-laptop" aria-hidden="true"></i> 5 Sites</li> <li><i class="fa fa-hdd-o" aria-hidden="true"></i> 5 GB Storage</li> <li><i class="fa fa-database" aria-hidden="true"></i> Database unlimited</li> <li><i class="fa fa-diamond" aria-hidden="true"></i> Free test</li> <li><i class="fa fa-cogs" aria-hidden="true"></i> Support 24 x 7</li> </ul> <div class="b-price-plan__item price_foot"> <a href="#" class="btn btn-warning price_btn"> <span>Buy now</span> <i class="fa fa-caret-right" aria-hidden="true"></i> </a> </div> </div> <!-- price plans item end --> </div> <div class="col-md-4 col-sm-4"> <!-- price plans item begin --> <div class="b-price-plan"> <div class="b-price-plan__item b-price-plan__head"> <h3>Enterprise</h3> </div> <div class="b-price-plan__item b-price-plan__cost"> <div class="cost-title">45<span>99</span></div> <div class="cost-time">Monthly</div> </div> <ul class="p_plan_list"> <li><i class="fa fa-laptop" aria-hidden="true"></i> 10 Sites</li> <li><i class="fa fa-hdd-o" aria-hidden="true"></i> 10 GB Storage</li> <li><i class="fa fa-database" aria-hidden="true"></i> Database unlimited</li> <li><i class="fa fa-diamond" aria-hidden="true"></i> Free test</li> <li><i class="fa fa-cogs" aria-hidden="true"></i> Support 24 x 7</li> </ul> <div class="b-price-plan__item price_foot"> <a href="#" class="btn btn-warning price_btn"> <span>Buy now</span> <i class="fa fa-caret-right" aria-hidden="true"></i> </a> </div> </div> <!-- price plans item end --> </div> </div> </div> </div> </div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a>
body {
    background: #cddc36 !important;
    font-family: 'Raleway', sans-serif;
}

.best-plan {
    margin: 0 auto 30px auto;
    position: relative;
    z-index: 99;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(51,51,51,1);
    font-weight: 300;
}

.best-plan__head {
    text-align: center;
    margin-bottom: 45px;
}

.best-plan__title {
    font-size: 36px;
    margin-bottom: 15px;
    margin-top: 50px;
    font-weight: 800;
    color: #3c2f17;
}

    .best-plan__title + p {
        font-size: 18px;
        font-weight: 300;
    }

.b-price-plan {
    border: 1px solid rgba(125,138,164,.25);
    max-width: 450px;
    margin: 0 auto 30px auto;
    background: #fff;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: opacity .35s linear, -webkit-transform .35s linear, -webkit-box-shadow .3s linear;
    transition: opacity .35s linear, -webkit-transform .35s linear, -webkit-box-shadow .3s linear;
    -o-transition: transform .35s linear, opacity .35s linear, box-shadow .3s linear;
    transition: transform .35s linear, opacity .35s linear, box-shadow .3s linear;
    transition: transform .35s linear, opacity .35s linear, box-shadow .3s linear, -webkit-transform .35s linear, -webkit-box-shadow .3s linear;
}

.b-price-plan__item {
    padding: 15px 30px;
}

.b-price-plan__head {
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    overflow: hidden;
    position: relative;
}

    .b-price-plan__head > h3 {
        font-size: 18px;
        text-align: center;
        position: relative;
        z-index: 1;
        margin: 0;
        letter-spacing: 1px;
    }

.price_foot {
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .price_foot:before {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(125,138,164,.1);
        -webkit-transition: top .6s linear;
        -o-transition: top .6s linear;
        transition: top .6s linear;
    }

.b-price-plan__cost {
    font-size: 20px;
    font-weight: 600;
    position: relative;
    z-index: 99;
    text-align: center;
    background: rgba(125,138,164,.1);
}

.cost-title {
    font-size: 55px;
    line-height: 1;
    font-weight: 700;
    color: rgba(125,138,164,1);
}

    .cost-title:before {
        content: '\f155';
        font-family: 'FontAwesome';
        display: inline-block;
        margin-right: 5px;
        font-size: 20px;
        position: relative;
        top: -20px;
    }

    .cost-title > span {
        position: relative;
        top: -25px;
        left: 5px;
        font-size: 18px;
    }

.cost-time {
    font-size: 13px;
    color: rgba(125,138,164,.75);
}


.price-plan_pro {
    position: relative;
    z-index: 99;
    -webkit-box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.3);
}

.p_plan_list {
    padding: 0;
    margin: 0;
}

    .p_plan_list > li {
        position: relative;
        padding: 15px 30px 15px 54px;
        margin: 0;
        list-style: none;
        background-color: #fff;
        border-top: 1px solid rgba(125,138,164,.1);
        -webkit-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
    }

        .p_plan_list > li:hover {
            border-color: rgba(125,138,164,.1);
            -webkit-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-shadow: 0 2px 4px rgba(125,138,164,.06);
            box-shadow: 0 2px 4px rgba(125,138,164,.06);
            position: relative;
            -webkit-transform: scale(1.05);
            -ms-transform: scale(1.05);
            transform: scale(1.05);
            z-index: 99;
        }

        .p_plan_list > li .fa {
            color: rgba(125,138,164,1);
            margin-right: 8px;
            width: 16px;
            height: 16px;
            position: absolute;
            top: 50%;
            left: 30px;
            margin-top: -8px;
        }

            .p_plan_list > li .fa.text-success {
                color: rgba(160,206,78,1) !important;
            }

            .p_plan_list > li .fa.text-danger {
                color: rgba(253,99,71,1) !important;
            }

        .p_plan_list > li:first-of-type {
            border-top: none;
        }

/* price_btn style */

.price_btn {
    overflow: hidden;
    position: relative;
    z-index: 99;
    margin: 15px auto;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(125,138,164,1);
    text-decoration: none;
    text-transform: uppercase;
    width: 70%;
    border: 2px solid rgba(125,138,164,1) !important;
    background: #fff !important;
    padding: 15px 20px !important;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

    .price_btn:before,
    .price_btn:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 50%;
        background: rgba(125,138,164,1) !important;
        -webkit-transition: width .3s ease-in;
        -o-transition: width .3s ease-in;
        transition: width .3s ease-in;
    }

    .price_btn:after {
        top: auto;
        bottom: 0;
        -webkit-transition: width .4s ease-in;
        -o-transition: width .4s ease-in;
        transition: width .4s ease-in;
    }

    .price_btn:hover:before,
    .price_btn:hover:after {
        width: 100%;
    }

    .price_btn > span {
        position: relative;
        z-index: 99;
    }

    .price_btn .fa {
        font-size: 18px;
        position: absolute;
        top: 50%;
        left: 100%;
        z-index: 99;
        width: 30px;
        opacity: 0;
        -webkit-transition: left .55s linear, opacity .55s linear;
        -o-transition: left .55s linear, opacity .55s linear;
        transition: left .55s linear, opacity .55s linear;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .price_btn:hover .fa {
        left: 80%;
        opacity: 1;
    }

    .price_btn:hover {
        overflow: visible;
        background: #fff;
        border-color: rgba(125,138,164,1) !important;
    }

    .price_btn:active,
    .price_btn:focus {
        background: rgba(125,138,164,1) !important;
        border-color: rgba(125,138,164,1) !important;
    }

.b-price-plan:hover {
    -webkit-box-shadow: 0 10px 20px rgba(125,138,164,.25) !important;
    box-shadow: 0 10px 20px rgba(125,138,164,.25) !important;
}

    .b-price-plan:hover .price_foot:before {
        top: 0;
    }

.b_plan_body:hover .b-price-plan {
    opacity: .25;
    -webkit-transform: scale(.95);
    -ms-transform: scale(.95);
    transform: scale(.95);
}

    .b_plan_body:hover .b-price-plan:hover {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

.ftr {
    text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link href="https://fonts.googleapis.com/css?family=Raleway:500,800" rel="stylesheet">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- this script got from www.frontendfreecode.com -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link href="https://fonts.googleapis.com/css?family=Raleway:500,800" rel="stylesheet">
<style>
body {
    background: #cddc36 !important;
    font-family: 'Raleway', sans-serif;
}

.best-plan {
    margin: 0 auto 30px auto;
    position: relative;
    z-index: 99;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(51,51,51,1);
    font-weight: 300;
}

.best-plan__head {
    text-align: center;
    margin-bottom: 45px;
}

.best-plan__title {
    font-size: 36px;
    margin-bottom: 15px;
    margin-top: 50px;
    font-weight: 800;
    color: #3c2f17;
}

    .best-plan__title + p {
        font-size: 18px;
        font-weight: 300;
    }

.b-price-plan {
    border: 1px solid rgba(125,138,164,.25);
    max-width: 450px;
    margin: 0 auto 30px auto;
    background: #fff;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: opacity .35s linear, -webkit-transform .35s linear, -webkit-box-shadow .3s linear;
    transition: opacity .35s linear, -webkit-transform .35s linear, -webkit-box-shadow .3s linear;
    -o-transition: transform .35s linear, opacity .35s linear, box-shadow .3s linear;
    transition: transform .35s linear, opacity .35s linear, box-shadow .3s linear;
    transition: transform .35s linear, opacity .35s linear, box-shadow .3s linear, -webkit-transform .35s linear, -webkit-box-shadow .3s linear;
}

.b-price-plan__item {
    padding: 15px 30px;
}

.b-price-plan__head {
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    overflow: hidden;
    position: relative;
}

    .b-price-plan__head > h3 {
        font-size: 18px;
        text-align: center;
        position: relative;
        z-index: 1;
        margin: 0;
        letter-spacing: 1px;
    }

.price_foot {
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .price_foot:before {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(125,138,164,.1);
        -webkit-transition: top .6s linear;
        -o-transition: top .6s linear;
        transition: top .6s linear;
    }

.b-price-plan__cost {
    font-size: 20px;
    font-weight: 600;
    position: relative;
    z-index: 99;
    text-align: center;
    background: rgba(125,138,164,.1);
}

.cost-title {
    font-size: 55px;
    line-height: 1;
    font-weight: 700;
    color: rgba(125,138,164,1);
}

    .cost-title:before {
        content: '\f155';
        font-family: 'FontAwesome';
        display: inline-block;
        margin-right: 5px;
        font-size: 20px;
        position: relative;
        top: -20px;
    }

    .cost-title > span {
        position: relative;
        top: -25px;
        left: 5px;
        font-size: 18px;
    }

.cost-time {
    font-size: 13px;
    color: rgba(125,138,164,.75);
}


.price-plan_pro {
    position: relative;
    z-index: 99;
    -webkit-box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.3);
}

.p_plan_list {
    padding: 0;
    margin: 0;
}

    .p_plan_list > li {
        position: relative;
        padding: 15px 30px 15px 54px;
        margin: 0;
        list-style: none;
        background-color: #fff;
        border-top: 1px solid rgba(125,138,164,.1);
        -webkit-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
    }

        .p_plan_list > li:hover {
            border-color: rgba(125,138,164,.1);
            -webkit-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-shadow: 0 2px 4px rgba(125,138,164,.06);
            box-shadow: 0 2px 4px rgba(125,138,164,.06);
            position: relative;
            -webkit-transform: scale(1.05);
            -ms-transform: scale(1.05);
            transform: scale(1.05);
            z-index: 99;
        }

        .p_plan_list > li .fa {
            color: rgba(125,138,164,1);
            margin-right: 8px;
            width: 16px;
            height: 16px;
            position: absolute;
            top: 50%;
            left: 30px;
            margin-top: -8px;
        }

            .p_plan_list > li .fa.text-success {
                color: rgba(160,206,78,1) !important;
            }

            .p_plan_list > li .fa.text-danger {
                color: rgba(253,99,71,1) !important;
            }

        .p_plan_list > li:first-of-type {
            border-top: none;
        }

/* price_btn style */

.price_btn {
    overflow: hidden;
    position: relative;
    z-index: 99;
    margin: 15px auto;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(125,138,164,1);
    text-decoration: none;
    text-transform: uppercase;
    width: 70%;
    border: 2px solid rgba(125,138,164,1) !important;
    background: #fff !important;
    padding: 15px 20px !important;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

    .price_btn:before,
    .price_btn:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 50%;
        background: rgba(125,138,164,1) !important;
        -webkit-transition: width .3s ease-in;
        -o-transition: width .3s ease-in;
        transition: width .3s ease-in;
    }

    .price_btn:after {
        top: auto;
        bottom: 0;
        -webkit-transition: width .4s ease-in;
        -o-transition: width .4s ease-in;
        transition: width .4s ease-in;
    }

    .price_btn:hover:before,
    .price_btn:hover:after {
        width: 100%;
    }

    .price_btn > span {
        position: relative;
        z-index: 99;
    }

    .price_btn .fa {
        font-size: 18px;
        position: absolute;
        top: 50%;
        left: 100%;
        z-index: 99;
        width: 30px;
        opacity: 0;
        -webkit-transition: left .55s linear, opacity .55s linear;
        -o-transition: left .55s linear, opacity .55s linear;
        transition: left .55s linear, opacity .55s linear;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .price_btn:hover .fa {
        left: 80%;
        opacity: 1;
    }

    .price_btn:hover {
        overflow: visible;
        background: #fff;
        border-color: rgba(125,138,164,1) !important;
    }

    .price_btn:active,
    .price_btn:focus {
        background: rgba(125,138,164,1) !important;
        border-color: rgba(125,138,164,1) !important;
    }

.b-price-plan:hover {
    -webkit-box-shadow: 0 10px 20px rgba(125,138,164,.25) !important;
    box-shadow: 0 10px 20px rgba(125,138,164,.25) !important;
}

    .b-price-plan:hover .price_foot:before {
        top: 0;
    }

.b_plan_body:hover .b-price-plan {
    opacity: .25;
    -webkit-transform: scale(.95);
    -ms-transform: scale(.95);
    transform: scale(.95);
}

    .b_plan_body:hover .b-price-plan:hover {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

.ftr {
    text-align: center;
}
</style>

</head>
<body>
<div class="best-plan">
    <div class="container">
        <div class="best-plan__head">
            <div class="row">
                <div class="col-md-12">
                    <h3 class="best-plan__title">Bootstrap Pricing Table with Fade Effect</h3>
                </div>
            </div>
        </div>
        <div class="b_plan_body">
            <div class="row">
                <div class="col-md-4 col-sm-4">
                    <!-- price plans item begin -->
                    <div class="b-price-plan">
                        <div class="b-price-plan__item b-price-plan__head">
                            <h3>Standard</h3>
                        </div>
                        <div class="b-price-plan__item b-price-plan__cost">
                            <div class="cost-title">4<span>99</span></div>
                            <div class="cost-time">Monthly</div>
                        </div>
                        <ul class="p_plan_list">
                            <li><i class="fa fa-laptop" aria-hidden="true"></i> 1 Site</li>
                            <li><i class="fa fa-hdd-o" aria-hidden="true"></i> 1 GB Storage</li>
                            <li><i class="fa fa-database" aria-hidden="true"></i> Database unlimited</li>
                            <li><i class="fa fa-diamond" aria-hidden="true"></i> Free test</li>
                            <li><i class="fa fa-cogs" aria-hidden="true"></i> Support 24 x 7</li>
                        </ul>
                        <div class="b-price-plan__item price_foot">
                            <a href="#" class="btn btn-warning price_btn">
                                <span>Buy now</span> <i class="fa fa-caret-right" aria-hidden="true"></i>
                            </a>
                        </div>
                    </div>
                    <!-- price plans item end -->
                </div>
                <div class="col-md-4 col-sm-4">
                    <!-- price plans item begin -->
                    <div class="b-price-plan price-plan_pro">
                        <div class="b-price-plan__item b-price-plan__head">
                            <h3>Professional</h3>
                        </div>
                        <div class="b-price-plan__item b-price-plan__cost">
                            <div class="cost-title">12<span>99</span></div>
                            <div class="cost-time">Monthly</div>
                        </div>
                        <ul class="p_plan_list">
                            <li><i class="fa fa-laptop" aria-hidden="true"></i> 5 Sites</li>
                            <li><i class="fa fa-hdd-o" aria-hidden="true"></i> 5 GB Storage</li>
                            <li><i class="fa fa-database" aria-hidden="true"></i> Database unlimited</li>
                            <li><i class="fa fa-diamond" aria-hidden="true"></i> Free test</li>
                            <li><i class="fa fa-cogs" aria-hidden="true"></i> Support 24 x 7</li>
                        </ul>
                        <div class="b-price-plan__item price_foot">
                            <a href="#" class="btn btn-warning price_btn">
                                <span>Buy now</span> <i class="fa fa-caret-right" aria-hidden="true"></i>
                            </a>
                        </div>
                    </div>
                    <!-- price plans item end -->
                </div>
                <div class="col-md-4 col-sm-4">
                    <!-- price plans item begin -->
                    <div class="b-price-plan">
                        <div class="b-price-plan__item b-price-plan__head">
                            <h3>Enterprise</h3>
                        </div>
                        <div class="b-price-plan__item b-price-plan__cost">
                            <div class="cost-title">45<span>99</span></div>
                            <div class="cost-time">Monthly</div>
                        </div>
                        <ul class="p_plan_list">
                            <li><i class="fa fa-laptop" aria-hidden="true"></i> 10 Sites</li>
                            <li><i class="fa fa-hdd-o" aria-hidden="true"></i> 10 GB Storage</li>
                            <li><i class="fa fa-database" aria-hidden="true"></i> Database unlimited</li>
                            <li><i class="fa fa-diamond" aria-hidden="true"></i> Free test</li>
                            <li><i class="fa fa-cogs" aria-hidden="true"></i> Support 24 x 7</li>
                        </ul>
                        <div class="b-price-plan__item price_foot">
                            <a href="#" class="btn btn-warning price_btn">
                                <span>Buy now</span> <i class="fa fa-caret-right" aria-hidden="true"></i>
                            </a>
                        </div>
                    </div>
                    <!-- price plans item end -->
                </div>
            </div>
        </div>
    </div>
</div>
<div id="bcl"><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a></div>

</body>
</html>
Preview