content logo

Bootstrap Tables:

Circular Pricing Table with Bootstrap

As a website owner, you need to always make sure your users avoid confusion. You do this by using navigation bars, sidebars, search boxes, cards and more; but the site itself is not the only thing that needs to be clear. Any service or subscription plan that you offer in your website should also be made fully clear so the customers can decide comfortably. For this reason, pricing tables are a great option. You can display all the solutions available in stylish panels in Bootstrap pricing tables. The users can then go to this page and view your different plans, check their features and compare them to one another. Finally, they can decide what plan suits them best and what they are going to buy.

You can use the pricing tables to differentiate your website from others as well. There are tons of different effects and styles you can add to your tables to make it stand out. One such pricing table with style is displayed in this post. It is such a unique concept and will surely interest your customers. It is in fact a circular pricing table which means the panel are in the shape of a circle. Each circle contains information about the price, name, description and a link for purchase. Of course, the Bootstrap circular pricing plane doesn’t offer as much space as the other tables but it looks great and works perfect with any site.

#

Bootstrap Pricing Tables

#

Pricing Table with Style

#

Circular Pricing Table

#

Bootstrap Circular Pricing Plane

<!-- This script got from frontendfreecode.com -->
<div id="wrapper">
    <div class="container">
        <div class="row">
              <div class="col-md-3">
                  <div class="circle c1 img-circle">
                      <h4 class="blue">Basic Plan</h4>
                      <span class="icon blue"><i class="fa fa-eur"></i></span>
                      <span class="price-large blue">8</span>
                      <span class="price-small">,90</span>
                      <p>Great for small Business</p>
                      <button type="button" class="btn btn-info">Choose</button>
                  </div>
              </div><!-- .Col-md-3 ends here -->
          
              <div class="col-md-3">
                  <div class="circle c2 img-circle">
                      <h4 class="yellow">Starter Plan</h4>
                      <span class="icon yellow"><i class="fa fa-eur"></i></span>
                      <span class="price-large yellow">24</span>
                      <span class="price-small">,90</span>
                      <p>Great for small Business</p>
                      <button type="button" class="btn btn-warning">Choose</button>
                  </div>
              </div><!-- .Col-md-3 ends here -->
          
          <div class="col-md-3">
                  <div class="circle c3 img-circle">
                      <h4 class="green">Premier Plan</h4>
                      <span class="icon green"><i class="fa fa-eur"></i></span>
                      <span class="price-large green">54</span>
                      <span class="price-small">,90</span>
                      <p>Great for small Business</p>
                      <button type="button" class="btn btn-success">Choose</button>
                  </div>
              </div><!-- .Col-md-3 ends here -->
          
          <div class="col-md-3">
                  <div class="circle c4 img-circle">
                      <h4 class="red">Deluxe Plan</h4>
                      <span class="icon red"><i class="fa fa-eur"></i></span>
                      <span class="price-large red">8</span>
                      <span class="price-small">,90</span>
                      <p>Great for small Business</p>
                      <button type="button" class="btn btn-danger">Choose</button>
                  </div>
              </div><!-- .Col-md-3 ends here -->
        </div><!-- .Container ends here -->
    </div><!-- .Row ends here -->
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
@charset "utf-8";
* {
    padding:0; 
    margin:0; 
    border:0;
}
body {
   background: #d5d5d5;
	font-family:trebuchet MS;
	color:#6B6B6B;
   border: 0 none;
   margin: 0;
	font-size:13px;
   padding: 0;
}
#wrapper{
  padding: 13px;
}
.container{}
.row{
 margin: 0 auto;
}
.circle{
  float:left;
  margin:10px 20px;
  background: #ffffff;
  padding: 35px;
  text-align: center;
  height: 250px;
  width: 250px;
  transition: all 0.5s;
  -moz-transition: all 0.5s; /* Firefox 4 */
  -webkit-transition: all 0.5s; /* Safari and Chrome */
  -o-transition: all 0.5s; /* Opera */
}
.circle h4{
  margin: 0;
  padding: 0;
}
.circle p{}
.circle span{}
.circle span.icon{
}
.circle span.icon i{
  font-size: 48px;
}
.circle span.price-large{
  font-size: 68px
}
.price-small{
  font-size: 24px 
}
.c1:hover{
  background: #39b3d7;
  color: #ffffff;
}
.c1 .blue{
  color: #39b3d7;
}
.c1:hover .blue{
  color: #ffffff;
}
.c2:hover{
  background: #ed9c28;
  color: #ffffff;
}
.c2 .yellow{
  color: #ed9c28;
}
.c2:hover .yellow{
  color: #ffffff;
}
.c3:hover{
  background: #47a447;
  color: #ffffff;
}
.c3 .green{
  color: #47a447;
}
.c3:hover .green{
  color: #ffffff;
}
.c4:hover{
  background: #d2322d;
  color: #ffffff;
}
.c4 .red{
  color: #d2322d;
}
.c4:hover .red{
  color: #ffffff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css'>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css'>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<style>
@charset "utf-8";
* {
    padding:0; 
    margin:0; 
    border:0;
}
body {
   background: #d5d5d5;
	font-family:trebuchet MS;
	color:#6B6B6B;
   border: 0 none;
   margin: 0;
	font-size:13px;
   padding: 0;
}
#wrapper{
  padding: 13px;
}
.container{}
.row{
 margin: 0 auto;
}
.circle{
  float:left;
  margin:10px 20px;
  background: #ffffff;
  padding: 35px;
  text-align: center;
  height: 250px;
  width: 250px;
  transition: all 0.5s;
  -moz-transition: all 0.5s; /* Firefox 4 */
  -webkit-transition: all 0.5s; /* Safari and Chrome */
  -o-transition: all 0.5s; /* Opera */
}
.circle h4{
  margin: 0;
  padding: 0;
}
.circle p{}
.circle span{}
.circle span.icon{
}
.circle span.icon i{
  font-size: 48px;
}
.circle span.price-large{
  font-size: 68px
}
.price-small{
  font-size: 24px 
}
.c1:hover{
  background: #39b3d7;
  color: #ffffff;
}
.c1 .blue{
  color: #39b3d7;
}
.c1:hover .blue{
  color: #ffffff;
}
.c2:hover{
  background: #ed9c28;
  color: #ffffff;
}
.c2 .yellow{
  color: #ed9c28;
}
.c2:hover .yellow{
  color: #ffffff;
}
.c3:hover{
  background: #47a447;
  color: #ffffff;
}
.c3 .green{
  color: #47a447;
}
.c3:hover .green{
  color: #ffffff;
}
.c4:hover{
  background: #d2322d;
  color: #ffffff;
}
.c4 .red{
  color: #d2322d;
}
.c4:hover .red{
  color: #ffffff;
}
</style>

</head>
<body>
<div id="wrapper">
    <div class="container">
        <div class="row">
              <div class="col-md-3">
                  <div class="circle c1 img-circle">
                      <h4 class="blue">Basic Plan</h4>
                      <span class="icon blue"><i class="fa fa-eur"></i></span>
                      <span class="price-large blue">8</span>
                      <span class="price-small">,90</span>
                      <p>Great for small Business</p>
                      <button type="button" class="btn btn-info">Choose</button>
                  </div>
              </div><!-- .Col-md-3 ends here -->
          
              <div class="col-md-3">
                  <div class="circle c2 img-circle">
                      <h4 class="yellow">Starter Plan</h4>
                      <span class="icon yellow"><i class="fa fa-eur"></i></span>
                      <span class="price-large yellow">24</span>
                      <span class="price-small">,90</span>
                      <p>Great for small Business</p>
                      <button type="button" class="btn btn-warning">Choose</button>
                  </div>
              </div><!-- .Col-md-3 ends here -->
          
          <div class="col-md-3">
                  <div class="circle c3 img-circle">
                      <h4 class="green">Premier Plan</h4>
                      <span class="icon green"><i class="fa fa-eur"></i></span>
                      <span class="price-large green">54</span>
                      <span class="price-small">,90</span>
                      <p>Great for small Business</p>
                      <button type="button" class="btn btn-success">Choose</button>
                  </div>
              </div><!-- .Col-md-3 ends here -->
          
          <div class="col-md-3">
                  <div class="circle c4 img-circle">
                      <h4 class="red">Deluxe Plan</h4>
                      <span class="icon red"><i class="fa fa-eur"></i></span>
                      <span class="price-large red">8</span>
                      <span class="price-small">,90</span>
                      <p>Great for small Business</p>
                      <button type="button" class="btn btn-danger">Choose</button>
                  </div>
              </div><!-- .Col-md-3 ends here -->
        </div><!-- .Container ends here -->
    </div><!-- .Row ends here -->
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>
Preview