content logo

Bootstrap Tables:

Bootstrap Pricing Table with Glowing Buttons

In a pricing table, you want to provide just enough information that the customer can decide but not too much that the table becomes long and boring. Intuitively, one might think that a Bootstrap pricing table with rich features and tons of various aspects is the way to go. They would assume this makes a good impression on the customers and catches their interest. This is not necessarily true. You should only give the customer what they want to know and nothing more.

If you use a lengthy pricing table with Bootstrap, then there is a high chance that the customers won’t even read the entire table and decide incorrectly. They might be frustrated by the lack of customer service and leave your website. Losing one customer doesn’t show a huge effect but if such scenario happens again and again in the course of time, then you will be left with a user base that could have been much larger if only you paid more attention when you were designing the site.

The code in this post is a pricing table with Bootstrap. It has a really nice design that can catch anyone’s interest. The colours are great too. This responsive pricing table can be used with any screen size for both mobile and desktop users.

#

Bootstrap Pricing Table

#

Pricing Table with Bootstrap

#

Responsive Pricing Table

#

Table with Bootstrap


<!-- This script got from frontendfreecode.com -->
<div class="container">
    <div class="row">
        <h1>Pricing Table</h1>
        <div class="col-md-4 col-sm-6 col-xs-6">
            <div class="pricing-table blue">
                <div class="value">
                    <span class="amount">$10<span class="month">/month</span></span>
                </div>
                <div class="pricing-content">
                    <div class="content">
                        <div class="header">
                            <h3>Plan-1</h3>
                        </div>
                        <ul>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="Sign-Up">
                    <a href="">Buy Plan</a>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-6">
            <div class="pricing-table">
                <div class="value">
                    <span class="amount">$20<span class="month">/month</span></span>
                </div>
                <div class="pricing-content">
                    <div class="content">
                        <div class="header">
                            <h3>Plan-2</h3>
                        </div>
                        <ul>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="Sign-Up">
                    <a href="">Buy Plan</a>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-6">
            <div class="pricing-table pink">
                <div class="value">
                    <span class="amount">$30<span class="month">/month</span></span>
                </div>
                <div class="pricing-content">
                    <div class="content">
                        <div class="header">
                            <h3>Plan-3</h3>
                        </div>
                        <ul>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="Sign-Up">
                    <a href="">Buy Plan</a>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
body {
    margin-top: 5px;
}
h3 {
    margin: 0;
}
a:hover,
a:focus {
    text-decoration: none !important;
    outline: none !important;
    color: #fff !important;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
h1 {
    text-align: center;
    margin-bottom: 20px;
}
.pricing-table {
    border-top: 15px solid #80A309;
    border-bottom: 15px solid #80A309;
    text-align: center;
    color: #fff;
}
.value {
    background: #8EBB24;
    padding: 20px 0;
    border-radius: 0 0 10px 10px;
    font-size: 70px;
    font-weight: 700;
}
.value .amount,
.value .month {
    display: inline-block;
}
.value .month {
    font-size: 30px;
    font-weight: normal;
}
.pricing-table .pricing-content {
    background: #22272b;
    margin: 0 15px;
    padding: 20px 30px 30px;
    position: relative;
    background-image: repeating-linear-gradient( transparent, transparent 2px, #161b1f 7px, #161b1f 5px);
    z-index: 1;
}
.pricing-table .pricing-content::before {
    content: "";
    position: absolute;
    background: #272c32;
    border: 2px solid #33383c;
    border-bottom: none;
    top: -20px;
    bottom: 0;
    left: 15px;
    right: 15px;
    z-index: -1;
    border-radius: 10px 10px 0 0;
}
.pricing-table .header {
    border-bottom: 1px solid #000;
    padding-bottom: 10px;
    display: block;
    margin-bottom: 15px;
    text-transform: uppercase;
}
.pricing-table .header h3 {
    font-size: 30px;
    font-weight: 700px;
}
.pricing-content ul {
    font-size: 17px;
    line-height: 60px;
}
.pricing-content ul li {
    border-bottom: 1px solid #000;
}
.Sign-Up {
    background: #8EBB24;
    border-radius: 10px 10px 0 0;
}
.Sign-Up a {
    display: block;
    padding: 20px 0;
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}
.Sign-Up a:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    display: inline-block;
    background: linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
    transform: translate(0,100%);
    transition: all .6s ease-in-out;
    opacity: 0;
}
.Sign-Up a:hover:before {
    opacity: 1;
    transform: translate( 0,-100%);
}
.pricing-table.blue {
    border-top-color: #361cc8;
    border-bottom-color: #361cc8;
}
.pricing-table.blue .value,
.pricing-table.blue .Sign-Up {
    background: #5a4ae2;
}
.pricing-table.pink {
    border-top-color: #ec224b;
    border-bottom-color: #ec224b;
}
.pricing-table.pink .value,
.pricing-table.pink .Sign-Up {
    background: #FE385B;
}
@media screen and (min-width:990px) and (max-width:1200px) {
.pricing-table .header h3 {
    font-size: 25px;
}
.pricing-content ul {
    font-size: 15px;
}
.pricing-content ul li i.fa {
    margin: 0 5px;
}
}
@media screen and (max-width:990px) {
    .pricing-table {
        margin-bottom: 30px;
    }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700|Montserrat:400,500,700,900" rel="stylesheet">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700|Montserrat:400,500,700,900" rel="stylesheet">
<style>
body {
    margin-top: 5px;
}
h3 {
    margin: 0;
}
a:hover,
a:focus {
    text-decoration: none !important;
    outline: none !important;
    color: #fff !important;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
h1 {
    text-align: center;
    margin-bottom: 20px;
}
.pricing-table {
    border-top: 15px solid #80A309;
    border-bottom: 15px solid #80A309;
    text-align: center;
    color: #fff;
}
.value {
    background: #8EBB24;
    padding: 20px 0;
    border-radius: 0 0 10px 10px;
    font-size: 70px;
    font-weight: 700;
}
.value .amount,
.value .month {
    display: inline-block;
}
.value .month {
    font-size: 30px;
    font-weight: normal;
}
.pricing-table .pricing-content {
    background: #22272b;
    margin: 0 15px;
    padding: 20px 30px 30px;
    position: relative;
    background-image: repeating-linear-gradient( transparent, transparent 2px, #161b1f 7px, #161b1f 5px);
    z-index: 1;
}
.pricing-table .pricing-content::before {
    content: "";
    position: absolute;
    background: #272c32;
    border: 2px solid #33383c;
    border-bottom: none;
    top: -20px;
    bottom: 0;
    left: 15px;
    right: 15px;
    z-index: -1;
    border-radius: 10px 10px 0 0;
}
.pricing-table .header {
    border-bottom: 1px solid #000;
    padding-bottom: 10px;
    display: block;
    margin-bottom: 15px;
    text-transform: uppercase;
}
.pricing-table .header h3 {
    font-size: 30px;
    font-weight: 700px;
}
.pricing-content ul {
    font-size: 17px;
    line-height: 60px;
}
.pricing-content ul li {
    border-bottom: 1px solid #000;
}
.Sign-Up {
    background: #8EBB24;
    border-radius: 10px 10px 0 0;
}
.Sign-Up a {
    display: block;
    padding: 20px 0;
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}
.Sign-Up a:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    display: inline-block;
    background: linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
    transform: translate(0,100%);
    transition: all .6s ease-in-out;
    opacity: 0;
}
.Sign-Up a:hover:before {
    opacity: 1;
    transform: translate( 0,-100%);
}
.pricing-table.blue {
    border-top-color: #361cc8;
    border-bottom-color: #361cc8;
}
.pricing-table.blue .value,
.pricing-table.blue .Sign-Up {
    background: #5a4ae2;
}
.pricing-table.pink {
    border-top-color: #ec224b;
    border-bottom-color: #ec224b;
}
.pricing-table.pink .value,
.pricing-table.pink .Sign-Up {
    background: #FE385B;
}
@media screen and (min-width:990px) and (max-width:1200px) {
.pricing-table .header h3 {
    font-size: 25px;
}
.pricing-content ul {
    font-size: 15px;
}
.pricing-content ul li i.fa {
    margin: 0 5px;
}
}
@media screen and (max-width:990px) {
    .pricing-table {
        margin-bottom: 30px;
    }
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <h1>Pricing Table</h1>
        <div class="col-md-4 col-sm-6 col-xs-6">
            <div class="pricing-table blue">
                <div class="value">
                    <span class="amount">$10<span class="month">/month</span></span>
                </div>
                <div class="pricing-content">
                    <div class="content">
                        <div class="header">
                            <h3>Plan-1</h3>
                        </div>
                        <ul>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="Sign-Up">
                    <a href="">Buy Plan</a>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-6">
            <div class="pricing-table">
                <div class="value">
                    <span class="amount">$20<span class="month">/month</span></span>
                </div>
                <div class="pricing-content">
                    <div class="content">
                        <div class="header">
                            <h3>Plan-2</h3>
                        </div>
                        <ul>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="Sign-Up">
                    <a href="">Buy Plan</a>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-6">
            <div class="pricing-table pink">
                <div class="value">
                    <span class="amount">$30<span class="month">/month</span></span>
                </div>
                <div class="pricing-content">
                    <div class="content">
                        <div class="header">
                            <h3>Plan-3</h3>
                        </div>
                        <ul>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                            <li>
                                Lorem, ipsum dolor
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="Sign-Up">
                    <a href="">Buy Plan</a>
                </div>
            </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>
Preview