Publish Article
Toggle navigation
TUTORIALS
Computers Basics
HTML
HTML5
CSS
CSS3
SEO
Bootstrap 3
Bootstrap 4
Materialize CSS
JavaScript
jQuery
Ajax
AngularJS
C - Language
Java
PHP
Python
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
S/W MCQ
S/W INTERVIEW QUESTIONS
COMPETITIVE EXAMS
Current Affairs
Current Affairs MCQ
Monthly Current Affairs MCQ
Today GK
General Knowledge
Verbal Ability
Mental Ability
UPSC
UPSC Previous Questions
UPSC 2022 Prelims Questions
UPSC 2021 Questions
UPSC 2020 Questions
UPSC 2019 Questions
ARTICLES
Articles
Publish Articles
Blog
MORE
IPC Sections
New
School Mathematics
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
