Pricing tables are widely used on many websites. If you haven’t created pricing tables with bootstrap, our tutorial will be useful for you. Simple responsive pricing tables – they look great on all devices. On big screens, we see the entire table, three columns in a row. On small screens, they will be placed from top to down, listing all the features vertically. We will also try to minimize the number of custom styles.
HTML structure
To start – create an empty ‘index.html’ file and add the following markup code into it:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Responsive Pricing Table with Bootstrap | Script Tutorials</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <section id="section-pricing" class="section-pricing"> <div class="container"> <div class="pricing-table"> <div class="row"> <!-- First package --> <div class="col-md-4"> <div class="package"> <div class="header-package-1 text-center"> <h3>Basic</h3> <div class="price"><h3>$10</h3></div> </div> <!-- details --> <div class="package-features text-center"> <ul> <li>Bandwith Unlimited</li> <li>Disk Space Unlimited</li> <li>Unlimited Sub Domain</li> <li>Free Domain</li> <li>Free Support</li> </ul> <div class="wrp-button text-center"><a href="#" class="btn standard-button">GET IT</a></div> </div> </div> </div> <!-- Second package --> <div class="col-md-4"> <div class="package"> <div class="header-package-2 text-center"> <div class="recomended"><h4>Recomended</h4></div> <h3>Standard</h3> <div class="price"><h3>$25</h3></div> </div> <!-- details --> <div class="package-features text-center"> <ul> <li>Bandwith Unlimited</li> <li>Disk Space Unlimited</li> <li>Unlimited Sub Domain</li> <li>Free Domain</li> <li>Free Support</li> <li>Extra</li> </ul> <div class="wrp-button text-center"><a href="#" class="btn standard-button">GET IT</a></div> </div> </div> </div> <!-- Third package --> <div class="col-md-4"> <div class="package"> <div class="header-package-3 text-center"> <h3>Advanced</h3> <div class="price"> <h3>$50</h3> </div> </div> <!-- details --> <div class="package-features text-center"> <ul> <li>Bandwith Unlimited</li> <li>Disk Space Unlimited</li> <li>Unlimited Sub Domain</li> <li>Free Domain</li> <li>Free Support</li> </ul> <div class="wrp-button text-center"><a href="#" class="btn standard-button">GET IT</a></div> </div> </div> </div> </div> </div> </div> </section> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html>
In the head section we included all necessary css files: bootstrap.min.css and style.css with our custom styles. Since rows in bootstrap consist of 12 columns, and we need to display 3 pricing sections, each section will be 4-length column:
<div class="col-md-4"> <div class="package"> <div class="header-package-1 text-center"> <h3>title</h3> <div class="price"><h3>price</h3></div> </div> <!-- details --> <div class="package-features text-center"> <ul> <li>feature 1</li> <li>feature 2</li> <li>feature 3</li> <li>feature 4</li> <li>feature 5</li> </ul> <div class="wrp-button text-center"><a href="#" class="btn standard-button">GET IT</a></div> </div> </div> </div>
As you see, we prepared all three sections total. Now, we can start stylize the sections.
CSS styles
Now, create another file: ‘css/style.css’ for our styles. First, we define the main styles for layout: paddings and margins:
css/style.css
@import url(http://fonts.googleapis.com/css?family=Roboto); .section-pricing { padding:50px 0; } .pricing-table { font-family:Roboto, sans-serif; margin-top:35px; } .package { margin:20px 0; overflow:auto; }
All pricing headers have green background, slightly rounded on top
.header-package-1,.header-package-2,.header-package-3 { background:green; border-radius:4px 4px 0 0; color:#fff; font-weight:700; } .header-package-1 { margin-top:30px; padding-bottom:15px; padding-top:15px; } .header-package-2 { padding-bottom:30px; padding-top:30px; } .header-package-3 { margin-top:30px; padding-bottom:15px; padding-top:15px; } .header-package-1 h3,.header-package-2 h3,.header-package-3 h3 { color:#fff; font-weight:800; }
Price has a thin white border, with defined width, so it looks like a box. Probably you already noticed rotated ‘recommended’ label. It has dashed white border, and it is rotated by 45 degrees
.price { border:2px solid #fff; color:green; margin:0 auto; padding-bottom:20px; padding-top:15px; width:100px; } .recomended h4 { border:2px dashed #FFF; display:inline-block; left:15px; padding:10px; position:absolute; transform:rotate(-45deg); }
The list of features has a thin border, as well as every feature in this list has the border (in bottom) of the same gray color
.package-features { border:1px solid #E3E3E3; } .package-features ul { padding:0; } .package-features ul li { border-bottom:2px solid #e3e3e3; list-style:none; overflow:auto; padding:20px 10px; }
Last element of pricing tables is button. The button has rounded corners, with white text on green background
.wrp-button { padding:26px 10px 36px; } .package-features .standard-button { margin:0; padding:15px 20px; } .standard-button { background:green; border:0; border-radius:4px; color:#fff; font-family:sans-serif; font-size:16px; font-weight:700; line-height:inherit; margin:5px; padding:15px 30px; text-transform:uppercase; -webkit-transition:all ease .25s; transition:all ease .25s; } .standard-button:hover { color:#fff; opacity:0.8; } .standard-button:focus { color:#fff; }
That’s it, our pricing table is ready. You can check the result.
Live Demo
[sociallocker]
download in package
[/sociallocker]