"Plans and Pricing"
Bootstrap 3.0.0 Snippet by BhaumikPatel

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-3"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"> Bronze</h3> </div> <div class="panel-body"> <div class="the-price"> <h1> $10<span class="subscript">/mo</span></h1> <small>1 month FREE trial</small> </div> <table class="table"> <tr> <td> 1 Account </td> </tr> <tr class="active"> <td> 1 Project </td> </tr> <tr> <td> 100K API Access </td> </tr> <tr class="active"> <td> 100MB Storage </td> </tr> <tr> <td> Custom Cloud Services </td> </tr> <tr class="active"> <td> Weekly Reports </td> </tr> </table> </div> <div class="panel-footer"> <a href="http://www.jquery2dotnet.com" class="btn btn-success" role="button">Sign Up</a> 1 month FREE trial</div> </div> </div> <div class="col-xs-12 col-md-3"> <div class="panel panel-success"> <div class="cnrflash"> <div class="cnrflash-inner"> <span class="cnrflash-label">MOST <br> POPULR</span> </div> </div> <div class="panel-heading"> <h3 class="panel-title"> Silver</h3> </div> <div class="panel-body"> <div class="the-price"> <h1> $20<span class="subscript">/mo</span></h1> <small>1 month FREE trial</small> </div> <table class="table"> <tr> <td> 2 Account </td> </tr> <tr class="active"> <td> 5 Project </td> </tr> <tr> <td> 100K API Access </td> </tr> <tr class="active"> <td> 200MB Storage </td> </tr> <tr> <td> Custom Cloud Services </td> </tr> <tr class="active"> <td> Weekly Reports </td> </tr> </table> </div> <div class="panel-footer"> <a href="http://www.jquery2dotnet.com" class="btn btn-success" role="button">Sign Up</a> 1 month FREE trial</div> </div> </div> <div class="col-xs-12 col-md-3"> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title"> Gold</h3> </div> <div class="panel-body"> <div class="the-price"> <h1> $35<span class="subscript">/mo</span></h1> <small>1 month FREE trial</small> </div> <table class="table"> <tr> <td> 5 Account </td> </tr> <tr class="active"> <td> 20 Project </td> </tr> <tr> <td> 300K API Access </td> </tr> <tr class="active"> <td> 500MB Storage </td> </tr> <tr> <td> Custom Cloud Services </td> </tr> <tr class="active"> <td> Weekly Reports </td> </tr> </table> </div> <div class="panel-footer"> <a href="http://www.jquery2dotnet.com" class="btn btn-success" role="button">Sign Up</a> 1 month FREE trial</div> </div> </div> </div> </div>
body { margin-top: 20px; } .panel { text-align: center; } .panel:hover { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px 5px rgba(130, 130, 130, 0.35); } .panel-body { padding: 0px; text-align: center; } .the-price { background-color: rgba(220,220,220,.17); box-shadow: 0 1px 0 #dcdcdc, inset 0 1px 0 #fff; padding: 20px; margin: 0; } .the-price h1 { line-height: 1em; padding: 0; margin: 0; } .subscript { font-size: 25px; } /* CSS-only ribbon styles */ .cnrflash { /*Position correctly within container*/ position: absolute; top: -9px; right: 4px; z-index: 1; /*Set overflow to hidden, to mask inner square*/ overflow: hidden; /*Set size and add subtle rounding to soften edges*/ width: 100px; height: 100px; border-radius: 3px 5px 3px 0; } .cnrflash-inner { /*Set position, make larger then container and rotate 45 degrees*/ position: absolute; bottom: 0; right: 0; width: 145px; height: 145px; -ms-transform: rotate(45deg); /* IE 9 */ -o-transform: rotate(45deg); /* Opera */ -moz-transform: rotate(45deg); /* Firefox */ -webkit-transform: rotate(45deg); /* Safari and Chrome */ -webkit-transform-origin: 100% 100%; /*Purely decorative effects to add texture and stuff*/ /* Safari and Chrome */ -ms-transform-origin: 100% 100%; /* IE 9 */ -o-transform-origin: 100% 100%; /* Opera */ -moz-transform-origin: 100% 100%; /* Firefox */ background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.1) 50%), linear-gradient(0deg, transparent 0%, rgba(1,1,1,.2) 50%); background-size: 4px,auto, auto,auto; background-color: #aa0101; box-shadow: 0 3px 3px 0 rgba(1,1,1,.5), 0 1px 0 0 rgba(1,1,1,.5), inset 0 -1px 8px 0 rgba(255,255,255,.3), inset 0 -1px 0 0 rgba(255,255,255,.2); } .cnrflash-inner:before, .cnrflash-inner:after { /*Use the border triangle trick to make it look like the ribbon wraps round it's container*/ content: " "; display: block; position: absolute; bottom: -16px; width: 0; height: 0; border: 8px solid #800000; } .cnrflash-inner:before { left: 1px; border-bottom-color: transparent; border-right-color: transparent; } .cnrflash-inner:after { right: 0; border-bottom-color: transparent; border-left-color: transparent; } .cnrflash-label { /*Make the label look nice*/ position: absolute; bottom: 0; left: 0; display: block; width: 100%; padding-bottom: 5px; color: #fff; text-shadow: 0 1px 1px rgba(1,1,1,.8); font-size: 0.95em; font-weight: bold; text-align: center; }

Related: See More


Questions / Comments:

how to align it to the center with same size with col-md-3 ?

tanmoy biswas () - 6 years ago - Reply 0


thanks a billion. God bless you. perfect, just perfect

Namo Osu () - 7 years ago - Reply 0


This is art! Well done on a truly amazing job. I've just integrated it into Laravel using the $loop iterator variable to find tune the style, and it's working just great! Thank you!

eugenevdm () - 7 years ago - Reply 0


Thank you! I implement the snippet (with minor customization) on https://tenanitfy.com. I would not be able to figure out the "Most Popular" triangle wrapper by myself.

tenantify () - 10 years ago - Reply 0


Hi
Seems part of the stylesheet is missing, Panel-primary, panel-info, button styles etc, Where cn I find it?

Dee () - 10 years ago - Reply 0


that part of CSS is coming from Bootstrap 3.0 CSS file
Please go to getbootstrap.com to get the CSS for it

maxsurguy () - 10 years ago - Reply 0


The "Most Popular" overlay doesn't seem to show in any browser. What am I missing?

Ajit Randhawa () - 10 years ago - Reply 0


can you align it to center? btw nice n simple

Ameenullah () - 10 years ago - Reply 0


change it to col-md-4 to 'align' to center

ash () - 10 years ago - Reply 0


Thank you. For me it fits awesome!

volkinson () - 7 years ago - Reply 0


thanks ash

but i dont want to expand the size of the box, should have spaces on both sides.

Ameenullah () - 10 years ago - Reply 0


Then use Bootstrap's offset Feature. See: http://getbootstrap.com/css...

theiNaD () - 10 years ago - Reply 0


Using the offset and changing the 'col-md-3' divs to 'col-md-4' is the way to go. Wrap the 'col-md-4' divs in a 'col-md-10 col-md-offset-1' this will center the 3 panels and keep the size the same.

Jon Ryan () - 10 years ago - Reply 0


the Most Popular Feature not parse in ie8

freddy () - 10 years ago - Reply 0


Mhhh, I don't like the mouse-over effect, but otherwise, great work!

Alex () - 10 years ago - Reply 0


If you don't want mouse-over effect, you can delete

.panel:hover { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px 5px rgba(130, 130, 130, 0.35); }

this line from css.

ceram1 () - 10 years ago - Reply 0


This is just what I need! Nice and simple.

kenaston () - 10 years ago - Reply 0


Does not look good with Firefox (The most popular feature).

Aeip () - 10 years ago - Reply 0


Now resolve firefox issue, looks good in firefox

Bhaumik Patel () - 10 years ago - Reply 0


Could you make a screenshot and upload it to http://filegr.am ?

maxsurguy () - 10 years ago - Reply 0