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:
01 |
<!DOCTYPE html> |
02 |
<html lang="en"> |
03 |
<head> |
04 |
<meta charset="UTF-8"> |
05 |
<title>Responsive Pricing Table with Bootstrap | Script Tutorials</title> |
06 |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> |
07 |
<link rel="stylesheet" href="css/style.css"> |
08 |
</head> |
09 |
<body> |
10 |
<section id="section-pricing" class="section-pricing"> |
11 |
<div class="container"> |
12 |
<div class="pricing-table"> |
13 |
<div class="row"> |
14 |
<!-- First package --> |
15 |
<div class="col-md-4"> |
16 |
<div class="package"> |
17 |
<div class="header-package-1 text-center"> |
18 |
<h3>Basic</h3> |
19 |
<div class="price"><h3>$10</h3></div> |
20 |
</div> |
21 |
<!-- details --> |
22 |
<div class="package-features text-center"> |
23 |
<ul> |
24 |
<li>Bandwith Unlimited</li> |
25 |
<li>Disk Space Unlimited</li> |
26 |
<li>Unlimited Sub Domain</li> |
27 |
<li>Free Domain</li> |
28 |
<li>Free Support</li> |
29 |
</ul> |
30 |
<div class="wrp-button text-center"><a href="#" class="btn standard-button">GET IT</a></div> |
31 |
</div> |
32 |
</div> |
33 |
</div> |
34 |
<!-- Second package --> |
35 |
<div class="col-md-4"> |
36 |
<div class="package"> |
37 |
<div class="header-package-2 text-center"> |
38 |
<div class="recomended"><h4>Recomended</h4></div> |
39 |
<h3>Standard</h3> |
40 |
<div class="price"><h3>$25</h3></div> |
41 |
</div> |
42 |
<!-- details --> |
43 |
<div class="package-features text-center"> |
44 |
<ul> |
45 |
<li>Bandwith Unlimited</li> |
46 |
<li>Disk Space Unlimited</li> |
47 |
<li>Unlimited Sub Domain</li> |
48 |
<li>Free Domain</li> |
49 |
<li>Free Support</li> |
50 |
<li>Extra</li> |
51 |
</ul> |
52 |
<div class="wrp-button text-center"><a href="#" class="btn standard-button">GET IT</a></div> |
53 |
</div> |
54 |
</div> |
55 |
</div> |
56 |
<!-- Third package --> |
57 |
<div class="col-md-4"> |
58 |
<div class="package"> |
59 |
<div class="header-package-3 text-center"> |
60 |
<h3>Advanced</h3> |
61 |
<div class="price"> |
62 |
<h3>$50</h3> |
63 |
</div> |
64 |
</div> |
65 |
<!-- details --> |
66 |
<div class="package-features text-center"> |
67 |
<ul> |
68 |
<li>Bandwith Unlimited</li> |
69 |
<li>Disk Space Unlimited</li> |
70 |
<li>Unlimited Sub Domain</li> |
71 |
<li>Free Domain</li> |
72 |
<li>Free Support</li> |
73 |
</ul> |
74 |
<div class="wrp-button text-center"><a href="#" class="btn standard-button">GET IT</a></div> |
75 |
</div> |
76 |
</div> |
77 |
</div> |
78 |
</div> |
79 |
</div> |
80 |
</div> |
81 |
</section> |
82 |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> |
83 |
</body> |
84 |
</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:
01 |
<div class="col-md-4"> |
02 |
<div class="package"> |
03 |
<div class="header-package-1 text-center"> |
04 |
<h3>title</h3> |
05 |
<div class="price"><h3>price</h3></div> |
06 |
</div> |
07 |
<!-- details --> |
08 |
<div class="package-features text-center"> |
09 |
<ul> |
10 |
<li>feature 1</li> |
11 |
<li>feature 2</li> |
12 |
<li>feature 3</li> |
13 |
<li>feature 4</li> |
14 |
<li>feature 5</li> |
15 |
</ul> |
16 |
<div class="wrp-button text-center"><a href="#" class="btn standard-button">GET IT</a></div> |
17 |
</div> |
18 |
</div> |
19 |
</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
01 |
@import url(http://fonts.googleapis.com/css?family=Roboto); |
02 |
.section-pricing { |
03 |
padding:50px 0; |
04 |
} |
05 |
.pricing-table { |
06 |
font-family:Roboto, sans-serif; |
07 |
margin-top:35px; |
08 |
} |
09 |
.package { |
10 |
margin:20px 0; |
11 |
overflow:auto; |
12 |
} |
All pricing headers have green background, slightly rounded on top
01 |
.header-package-1,.header-package-2,.header-package-3 { |
02 |
background:green; |
03 |
border-radius:4px 4px 0 0; |
04 |
color:#fff; |
05 |
font-weight:700; |
06 |
} |
07 |
.header-package-1 { |
08 |
margin-top:30px; |
09 |
padding-bottom:15px; |
10 |
padding-top:15px; |
11 |
} |
12 |
.header-package-2 { |
13 |
padding-bottom:30px; |
14 |
padding-top:30px; |
15 |
} |
16 |
.header-package-3 { |
17 |
margin-top:30px; |
18 |
padding-bottom:15px; |
19 |
padding-top:15px; |
20 |
} |
21 |
.header-package-1 h3,.header-package-2 h3,.header-package-3 h3 { |
22 |
color:#fff; |
23 |
font-weight:800; |
24 |
} |
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
01 |
.price { |
02 |
border:2px solid #fff; |
03 |
color:green; |
04 |
margin:0 auto; |
05 |
padding-bottom:20px; |
06 |
padding-top:15px; |
07 |
width:100px; |
08 |
} |
09 |
.recomended h4 { |
10 |
border:2px dashed #FFF; |
11 |
display:inline-block; |
12 |
left:15px; |
13 |
padding:10px; |
14 |
position:absolute; |
15 |
transform:rotate(-45deg); |
16 |
} |
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
01 |
.package-features { |
02 |
border:1px solid #E3E3E3; |
03 |
} |
04 |
.package-features ul { |
05 |
padding:0; |
06 |
} |
07 |
.package-features ul li { |
08 |
border-bottom:2px solid #e3e3e3; |
09 |
list-style:none; |
10 |
overflow:auto; |
11 |
padding:20px 10px; |
12 |
} |
Last element of pricing tables is button. The button has rounded corners, with white text on green background
01 |
.wrp-button { |
02 |
padding:26px 10px 36px; |
03 |
} |
04 |
.package-features .standard-button { |
05 |
margin:0; |
06 |
padding:15px 20px; |
07 |
} |
08 |
.standard-button { |
09 |
background:green; |
10 |
border:0; |
11 |
border-radius:4px; |
12 |
color:#fff; |
13 |
font-family:sans-serif; |
14 |
font-size:16px; |
15 |
font-weight:700; |
16 |
line-height:inherit; |
17 |
margin:5px; |
18 |
padding:15px 30px; |
19 |
text-transform:uppercase; |
20 |
-webkit-transition:all ease .25s; |
21 |
transition:all ease .25s; |
22 |
} |
23 |
.standard-button:hover { |
24 |
color:#fff; |
25 |
opacity:0.8; |
26 |
} |
27 |
.standard-button:focus { |
28 |
color:#fff; |
29 |
} |
That’s it, our pricing table is ready. You can check the result.
Live Demo
[sociallocker]
download in package
[/sociallocker]