Creative Pricing table design using Bootstrap

byCodingFlicks -July 31, 2020

0

These days we see different websites popping up with membership websites, e-courses, digital goods, and various packages and programs. Those websites provide some offers on their website for new customers. Having a pricing table is an excellent way to outline the benefits of each upgraded plan that drives any visitors interested in any programs or packages to a payment or registration page. In this tutorial, we will show you an easy way to add a pricing table to your website. It will be mobile responsive as we are using the Bootstrap framework to design it.

For this tutorial, we are going to use the Bootstrap framework to design the project. You need to download the bootstrap from the official website. After extracting the downloaded file, we will copy the bootstrap CSS file from there and add that to our project. In this tutorial, I used the CDN version of Bootstrap and linked the file below for your convenience.

Let us start the HTML markup by creating a div element with the class name 'pricing-area.' Then, we place a Bootstrap container div element, which will contain the pricing table's details. Inside the row bootstrap element, we will provide three divs with bootstrap responsive column classes. In addition to that, I will take another div element with the name 'single-price' class. After that, I have taken two div named 'deal-top' and 'deal-bottom' in the 'single-price' div. ''deal-top' div element will contain the deal name and price. The other div element will provide information about what are facilities customers with the price range mentioned above. I have also added a signup button at the bottom so that if anyone decides to take the deal, they could do it by pressing that button, and that will take them to the signup page.

In the CSS file, first, we will give the body tag a background color. Then i have given the single-price div element some basic styling like text-align, background, margin, and transition. I also added a box-shadow effect to give it a sleek look. Sequentially I have styled the other HTML tags used in top and bottom deal div. To differentiate the deal-top div from the deal-bottom we have created an angled border effect for the deal-top div. When we hover over each pricing table, the background color of the deal-top and button of the deal-bottom div changed to pink color. For getting the border effect, we first gave the deal-top div and relative position value. Then we provided the 'after' pseudo-class of that div an absolute position value and gave the necessary border values to get the angled effect.

You may also like:

We then styled all the tags taken in the deal-bottom class one by one. With hover effect animation, the default bluish background color of the deal-top div will change to a pinkish background. For that, we gave the deal-top div class a #e50077 background color for the hovering stage. We also have to change the deal-top pseudo-element to a border-top color. Otherwise, the background color of the angled portion of the deal-top class will not switch on hover. Likewise, we will change the button background color for the hovering stage as well.

You need to create an HTML and CSS file to create this snippet. Then you need to add the CSS file to your project along with Bootstrap CSS. Next, please copy the code below and paste them into the files and paste them. Save the file and run the snippet in the browser.

HTML:

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Creative Pricing table design using Bootstrap</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="pricing-area">
		<div class="container">
			<div class="row">
				<div class="col-md-4 col-sm-6 col-xs-12">
					<div class="single-price">
						<div class="deal-top">
							<h3>Basic</h3>
							<h4>19 <span class="sup">$</span></h4>
						</div>
						<div class="deal-bottom">
							<ul class="deal-item">
								<li>10 GB Storage</li>
								<li>10 Email address</li>
								<li>10 Domain names</li>
								<li>500 gb Bandwidth</li>
								<li>24 hour Support</li>
							</ul>
							<div class="btn-area">
								<a href="#">Sign Up</a>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-4 col-sm-6 col-xs-12">
					<div class="single-price">
						<div class="deal-top">
							<h3>Standard</h3>
							<h4>49 <span class="sup">$</span></h4>
						</div>
						<div class="deal-bottom">
							<ul class="deal-item">
								<li>50 GB Storage</li>
								<li>50 Email address</li>
								<li>50 Domain names</li>
								<li>1 TB Bandwidth</li>
								<li>24 hour Support</li>
							</ul>
							<div class="btn-area">
								<a href="#">Sign Up</a>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-4 col-sm-6 col-xs-12">
					<div class="single-price">
						<div class="deal-top">
							<h3>Premium</h3>
							<h4>69 <span class="sup">$</span></h4>
						</div>
						<div class="deal-bottom">
							<ul class="deal-item">
								<li>100 GB Storage</li>
								<li>100 Email address</li>
								<li>100 Domain names</li>
								<li>5 TB Bandwidth</li>
								<li>24 hour Support</li>
							</ul>
							<div class="btn-area">
								<a href="#">Sign Up</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

CSS:

  body {
	background: #bcbcbc;    
}
.single-price {
	text-align: center;
	background: #fff;
	transition: .7s;
	margin-top: 50px;
	box-shadow: 2px 5px 15px rgba(0, 0, 0, 0.5);
}
.single-price h3 {
	font-size: 25px;
	color: #000;
	font-weight: 600;
	text-align: center;
	margin: 0;
	margin-top: -80px;
	font-family: poppins;
	color: #fff;
}
.single-price h4 {
	font-size: 48px;
	font-weight: 500;
	color: #fff;
}
.single-price h4 span.sup {
	vertical-align: text-top;
	font-size: 25px;
}
.deal-top {
	position: relative;
	background: #1e1459;
	font-size: 16px;
	text-transform: uppercase;
	padding: 136px 24px 0;
	transition: .7s;
}
.deal-top::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -50px;
	width: 0;
	height: 0;
	border-top: 50px solid #1e1459;
	border-left: 175px solid transparent;
	border-right: 183px solid transparent;
	transition: .7s;
}
.deal-bottom {
	padding: 56px 16px 0;
}
.deal-bottom ul {
	margin: 0;
	padding: 0;
}
.deal-bottom ul li {
	font-size: 16px;
	color: #262626;
	font-weight: 300;
	margin-top: 16px;
	border-top: 1px solid #b6b6b6;
	padding-top: 16px;
	list-style: none;
}
.btn-area a {
	display: inline-block;
	font-size: 18px;
	color: #fff;
	background: #1e1459;
	padding: 8px 64px;
	margin-top: 32px;
	border-radius: 50px;
	margin-bottom: 40px;
	text-transform: uppercase;
	font-weight: bold;
	text-decoration: none;
	transition: .7s;
}
.single-price:hover .deal-top {
	background: #e50077;
}
.single-price:hover .deal-top:after {
	border-top: 50px solid #e50077;
}
.single-price:hover .btn-area a {
	background: #e50077;
}

Thank you for stopping by.

Please do not enter any spam link in the comment box.