Bootstrap rounded Pricing tables

bootstrap-rounded-pricing-tables.markdown

Bootstrap rounded Pricing tables

A Pen by Reinier on CodePen.

License.

index.html

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
  
<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>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@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: 60px 0px;
}
.container{}
.row{}
.circle{
  background: #ffffff;
  padding: 35px;
  text-align: center;
  height: 250px;
  width: 250px;
  border: 8px solid #F2F2F2;
    
    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;
}

styles

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css" rel="stylesheet" />