bs4 pricing plan list

This bootstrap snippet called "bs4 pricing plan list" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: pricing,plan,card,bs4

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<div class="row gutters">
	<div class="col-lg-4 col-md-4 col-sm-12">
		<div class="plan-one">
			<div class="pricing-header">
				<h4 class="plan-title">Basic</h4>
				<div class="plan-cost">$129.00</div>
				<div class="plan-save">Save $29.00</div>
			</div>
			<ul class="plan-features">
				<li>5GB Linux Web Space</li>
				<li>5 MySQL Databases</li>
				<li>500 Emails</li>
				<li>250Gb mothly Transfer</li>
				<li class="text-muted"><del>24/7 Tech Support</del></li>
				<li class="text-muted"><del>Daily Backups</del></li>
			</ul>
			<div class="plan-footer">
				<a href="#" class="btn btn-info btn-lg btn-rounded">Select Plan</a>
			</div>
		</div>
	</div>
	<div class="col-lg-4 col-md-4 col-sm-12">
		<div class="plan-one">
			<div class="pricing-header orange">
				<h4 class="plan-title">Standard</h4>
				<div class="plan-cost">$189.00</div>
				<div class="plan-save">Save $49.00</div>
			</div>
			<ul class="plan-features">
				<li>10GB Linux Web Space</li>
				<li>10 MySQL Databases</li>
				<li>1000 Emails</li>
				<li>750Gb mothly Transfer</li>
				<li>24/7 Tech Support</li>
				<li class="text-muted"><del>Daily Backups</del></li>
			</ul>
			<div class="plan-footer">
				<a href="#" class="btn btn-danger btn-lg btn-rounded">Select Plan</a>
			</div>
		</div>
	</div>
	<div class="col-lg-4 col-md-4 col-sm-12">
		<div class="plan-one">
			<div class="pricing-header green">
				<h4 class="plan-title">Premium</h4>
				<div class="plan-cost">$219.00</div>
				<div class="plan-save">Save $99.00</div>
			</div>
			<ul class="plan-features">
				<li>50GB Linux Web Space</li>
				<li>100 MySQL Databases</li>
				<li>Unlimited Emails</li>
				<li>1000Gb mothly Transfer</li>
				<li>24/7 Tech Support</li>
				<li>Daily Backups</li>
			</ul>
			<div class="plan-footer">
				<a href="#" class="btn btn-info btn-lg btn-rounded">Select Plan</a>
			</div>
		</div>
	</div>
</div>
</div>

CSS code

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

/*************** 9 J. Pricing Plans ***************/

.plan-one {
    margin: 0 0 20px 0;
    width: 100%;
    position: relative;
    background: #ffffff;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
}

.plan-one .pricing-header {
    padding: 0;
    margin-bottom: 0;
    text-align: center;
}

.plan-one .pricing-header .plan-title {
    -webkit-border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    border-radius: 10px 10px 0px 0px;
    font-size: 1.2rem;
    color: #ffffff;
    padding: 10px 0;
    font-weight: 600;
    background: #5a99ee;
    margin: 0;
}

.plan-one .pricing-header .plan-cost {
    color: #ffffff;
    background: #71a7f0;
    padding: 15px 0;
    font-size: 2.5rem;
    font-weight: 700;
}

.plan-one .pricing-header .plan-save {
    color: #ffffff;
    background: #84b3f2;
    padding: 10px 0;
    font-size: 1rem;
    font-weight: 700;
}

.plan-one .pricing-header.green .plan-title {
    background: #47BCC7;
}

.plan-one .pricing-header.green .plan-cost {
    background: #5bc3cd;
}

.plan-one .pricing-header.green .plan-save {
    background: #6ac9d2;
}

.plan-one .pricing-header.orange .plan-title {
    background: #fc8165;
}

.plan-one .pricing-header.orange .plan-cost {
    background: #fd967e;
}

.plan-one .pricing-header.orange .plan-save {
    background: #fdaa97;
}

.plan-one .plan-features {
    border: 1px solid #e6ecf3;
    border-top: 0;
    border-bottom: 0;
    padding: 0;
    margin: 0;
    text-align: left;
}

.plan-one .plan-features li {
    padding: 10px 15px 10px 40px;
    margin: 5px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    border-bottom: 1px solid #e6ecf3;
    line-height: 100%;
}

.plan-one .plan-features li:before {
    position: absolute;
    left: 15px;
    top: 10px;
    font-size: 1rem;
    color: #000000;
    content: "\f00c";
    font-family: 'normal normal normal 14px/1 FontAwesome';
}

.plan-one .plan-footer {
    border: 1px solid #e6ecf3;
    border-top: 0;
    background: #ffffff;
    -webkit-border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
    text-align: center;
    padding: 10px 0 30px 0;
}

@media (max-width: 767px) {
    .plan-one .pricing-header {
        text-align: center;
    }
    .plan-one .pricing-header i {
        display: block;
        float: none;
        margin-bottom: 20px;
    }
}
                                    

Similar snippets

Bootstrap snippet bs4 profile with messages and edit

bs4 profile with messages and edit

View

Bootstrap snippet bs4 project list

bs4 project list

View

Bootstrap snippet bs4 edit profile page

bs4 edit profile page

View

About this snippet

Creator: Dey Dey

Bootstrap version: 4.1.1

Created: Dec 1st, 08:20

Views: 2