Toggle navigation
TUTORIALS
Basics Of Computer Science
HTML
HTML5
CSS
CSS3
Bootstrap 3
Bootstrap 4
Materialize CSS
JavaScript
jQuery
Ajax
AngularJS
C - Language
Java
PHP
Python
SEO
QUIZ
INTERVIEW QUESTIONS
REFERENCES
Practice Templates
Bootstrap Templates
PHP Projects
PLUGINS
Bootstrap 3 Plugins
Bootstrap 4 Plugins
Static Menus
Responsive Menus
Dropdown
Tabs & Pills
Modal Boxes (Dialog box)
Gallery Plugins
Sliders
Buttons
Dynamic Forms
Forms
Image Effects
G K
New
CURRENT AFFAIRS
New
MORE
IPC Sections
New
School Mathematics
Blog
CODE EDITOR
New
EXECUTE
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 3 Pricing Example, Free Time Learning, Bootstrap 3 Snippets</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <style type="text/css"> body { padding-top: 40px; padding-bottom: 40px; } .panel{ background:none; } .panel.price, .panel.price>.panel-heading{ border-radius:0px; -moz-transition: all .3s ease; -o-transition: all .3s ease; -webkit-transition: all .3s ease; } .panel.price:hover{ box-shadow: 0px 0px 30px rgba(0,0,0, .2); } .panel.price:hover>.panel-heading{ box-shadow: 0px 0px 30px rgba(0,0,0, .2) inset; } .panel.price>.panel-heading{ box-shadow: 0px 5px 0px rgba(0, 153, 218, 1) inset; text-shadow:0px 3px 0px rgba(0, 153, 218, .6); } .price .list-group-item{ border-bottom-:1px solid rgba(250,250,250, .5); } .panel.price .list-group-item:last-child { border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } .panel.price .list-group-item:first-child { border-top-right-radius: 0px; border-top-left-radius: 0px; } .price .panel-footer { color: #fff; border-bottom:0px; background-color: rgba(0,0,0, .1); box-shadow: 0px 3px 0px rgba(0, 153, 218, 1); } .panel.price .btn{ box-shadow: 0 -1px 0px rgba(50,50,50, .2) inset; border:0px; border-radius:1px; } .price.panel-white>.panel-heading { color: #000; font-weight:700; background-color: #f9f9f9; border-color: #ccc; border-bottom: 1px solid #ccc; text-shadow: 0px 2px 0px rgba(250,250,250, .7); } .panel.panel-white.price:hover>.panel-heading{ box-shadow: 0px 0px 30px rgba(0,0,0, .05) inset; } .price.panel-white>.panel-body { color: #fff; background-color: #dfdfdf; } .price.panel-white>.panel-body .lead{ text-shadow: 0px 2px 0px rgba(250,250,250, .8); color:#666; } .price:hover.panel-white>.panel-body .lead{ text-shadow: 0px 2px 0px rgba(250,250,250, .9); color:#333; } .price.panel-white .list-group-item { color: #333; background-color: rgba(50,50,50, .01); font-weight:600; text-shadow: 0px 1px 0px rgba(250,250,250, .75); } </style> <div class="container"> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"> <!-- PRICE ITEM --> <div class="panel price panel-white"> <div class="panel-heading arrow_box text-center"> <h3>FREE PLAN</h3> </div> <div class="panel-body text-center"> <p class="lead" style="font-size:30px"><strong>$0 / Year</strong></p> </div> <ul class="list-group list-group-flush text-center"> <li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li> <li class="list-group-item"><i class="icon-ok text-success"></i> 1 project</li> <li class="list-group-item"><i class="icon-ok text-success"></i> No support</li> </ul> <div class="panel-footer"> <a class="btn btn-lg btn-block btn-default" href="#">BUY NOW!</a> </div> </div> <!-- /PRICE ITEM --> </div> <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"> <!-- PRICE ITEM --> <div class="panel price panel-white"> <div class="panel-heading arrow_box text-center"> <h3>BASIC PLAN</h3> </div> <div class="panel-body text-center"> <p class="lead" style="font-size:30px"><strong>$30 / Year</strong></p> </div> <ul class="list-group list-group-flush text-center"> <li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li> <li class="list-group-item"><i class="icon-ok text-success"></i> 5 projects</li> <li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li> </ul> <div class="panel-footer"> <a class="btn btn-lg btn-block btn-default" href="#">BUY NOW!</a> </div> </div> <!-- /PRICE ITEM --> </div> <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"> <!-- PRICE ITEM --> <div class="panel price panel-white"> <div class="panel-heading arrow_box text-center"> <h3>ECONAMY PLAN</h3> </div> <div class="panel-body text-center"> <p class="lead" style="font-size:30px"><strong>$99 / Year</strong></p> </div> <ul class="list-group list-group-flush text-center"> <li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li> <li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li> <li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li> </ul> <div class="panel-footer"> <a class="btn btn-lg btn-block btn-default" href="#">BUY NOW!</a> </div> </div> <!-- /PRICE ITEM --> </div> <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"> <!-- PRICE ITEM --> <div class="panel price panel-white"> <div class="panel-heading arrow_box text-center"> <h3>ULTIMATE PLAN</h3> </div> <div class="panel-body text-center"> <p class="lead" style="font-size:30px"><strong>$175 / Year</strong></p> </div> <ul class="list-group list-group-flush text-center"> <li class="list-group-item"><i class="icon-ok text-success"></i> Multiple use</li> <li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li> <li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li> </ul> <div class="panel-footer"> <a class="btn btn-lg btn-block btn-default" href="#">BUY NOW!</a> </div> </div> <!-- /PRICE ITEM --> </div> </div> </div> </body> </html>
×
Close
Bootstrap 3 Pricing Example, Free Time Learning, Bootstrap 3 Snippets
Sample Data
