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

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS