Circular Price Table

This bootstrap snippet called "Circular Price Table" 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

This is the HTML code for this bootstrap snippet

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container bootstrap snippet">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="row well bg-themeprimary no-margin">
                <div class="">
                    <div class="col-md-3 col-sm-4 col-xs-12">
                        <div class="plan-circular">
                            <span class="plan-title">STARTER</span>
                            <hr class="title-devider">
                            <div class="plan-body">
                                <div class="plan-currency">$</div>
                                <div class="plan-price">35</div>
                                <div class="plan-month">monthly</div>
                            </div>
                            <div class="plan-tag bg-themesecondary">
                                <i class="tag-icon fa fa-times"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-4 col-xs-12">
                        <div class="plan-circular">
                            <span class="plan-title">STANDARD</span>
                            <hr class="title-devider">
                            <div class="plan-body">
                                <div class="plan-currency">$</div>
                                <div class="plan-price">45</div>
                                <div class="plan-month">monthly</div>
                            </div>
                            <div class="plan-tag bg-themethirdcolor">
                                <i class="tag-icon fa fa-times"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-4 col-xs-12">
                        <div class="plan-circular animated flipInX">
                            <span class="plan-title">PROFESSIONAL</span>
                            <hr class="title-devider">
                            <div class="plan-body">
                                <div class="plan-currency">$</div>
                                <div class="plan-price">55</div>
                                <div class="plan-month">monthly</div>
                            </div>
                            <div class="plan-tag bg-themefourthcolor">
                                <i class="tag-icon fa fa-check"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-4 col-xs-12">
                        <div class="plan-circular">
                            <span class="plan-title">ENTERPRISE</span>
                            <hr class="title-devider">
                            <div class="plan-body">
                                <div class="plan-currency">$</div>
                                <div class="plan-price">65</div>
                                <div class="plan-month">monthly</div>
                            </div>
                            <div class="plan-tag bg-themefifthcolor">
                                <i class="tag-icon fa fa-times"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
	</div>
</div>

This is the CSS code for this bootstrap snippet

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

body{
    background:#eee;
    margin-top:20px;
}

.well[class*="bg-"] {
  color: #f5f5f5;
}

.plan-circular {
  margin: 10px auto;
  text-align: center;
}

.no-margin {
  margin: 0 !important;
}

.plan-circular .plan-title {
  color: #fff;
}

.plan-circular .title-devider {
  margin: 10px 40%;
  border-color: #fff;
}

.plan-circular .plan-body {
  position: relative;
  width: 150px;
  height: 150px;
  background-color: #fff;
  border: 10px solid rgba(255,255,255,.3);
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  margin: 0 auto;
  font-family: 'Open Sans',sans-serif;
}

.plan-circular .plan-body .plan-currency {
  position: absolute;
  top: 33px;
  right: 80px;
  font-size: 26px;
  color: #777;
}

.plan-circular .plan-body .plan-price {
  position: absolute;
  top: 33px;
  right: 35px;
  font-size: 40px;
  color: #555;
}

.plan-circular .plan-body .plan-month {
  position: absolute;
  top: 80px;
  right: 38px;
  font-size: 12px;
  color: #999;
}

.plan-circular .plan-tag {
  width: 25px;
  height: 40px;
  -webkit-border-radius: 2px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 2px;
  -moz-background-clip: padding;
  border-radius: 2px;
  background-clip: padding-box;
  margin: 0 auto;
  margin-top: -15px;
}

.bg-themeprimary {
  background-color: #2dc3e8 !important;
}

.bg-themesecondary {
  background-color: #fb6e52 !important;
}

.bg-themethirdcolor {
  background-color: #ffce55 !important;
}

.bg-themefourthcolor {
  background-color: #a0d468 !important;
}

.bg-themefifthcolor {
  background-color: #e75b8d !important;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Jul 1st 2015, 00:06

Views: 3.0K

Rated 5/5 based on 2 reviews