Frontend Free Code
Frontend Free Code
Developers Codes
Graphics Photo
Crypto World
Code Tutorial
Javascript Codes
Home Home How to How to use Sitemap Sitemap About us About Us Suggested Posts Suggested Privacy Policy Privacy Policy

Feel The Power


content logo

Bootstrap Tables:

Circular Pricing Table with Bootstrap

Previous CodePrevious Code Next CodeNext Code

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>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpbh-mt'},{'server':'p3plmcpnl484880'},{'dcenter':'p3'},{'cp_id':'765442'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>
Preview
Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes
TOP CODES
Toggle Switch Button for Changing Language with Bootstrap
Draggable Cards with Bootstrap Grids
Bootstrap Table with Add New Row Button
WHAT IS NEW IN KERIXA?
Glassy Chat Box Code with Reaction Emojis
Dark Neo Brutal Resume Template
Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability
Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability
Flat Photo Frame Template
Cute Photo Frame Template
16 React JS Accordions
17 React JS Buttons
RECENT CODES
Bootstrap Timeline with Colorful Lines and Icons
Simple Dark Vertical Timeline with Bootstrap
Colorful Icons for Bootstrap Timeline Joints
Bootstrap Vertical Timeline with Image Cards and Descriptions
Vertical Bootstrap Timeline in Half Page
Drop Down Menu by React JS
Animating React Popup with Float in and Zoom Effects
Popup vs. Alert Code using React JS
React Glassy Gradient Popup Modal
Animating Toggle Popup Menu with React JS
CATEGORIES
Bootstrap Accordions Bootstrap Buttons
Bootstrap Cards Bootstrap Footers
Bootstrap Forms Bootstrap Grids
Bootstrap Headers Bootstrap Paginations
Bootstrap Popups Bootstrap Progress Bars
Bootstrap Search Boxes Bootstrap Sidebars
Bootstrap Sliders Bootstrap Tables
Bootstrap Tabs Bootstrap Thumbnails
Bootstrap Timeline Bootstrap Toggle Switches
React Accordions React Buttons
React Forms React Headers
React Menus React Popups
React Progress Bars React Sidebars
Frontend Free Code
© 2025 Kerixa Inc