Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"dashb"
Bootstrap 3.3.0 Snippet by
tmfl
3.3.0
Preview
HTML
View Full Screen
Fork
Fork this
852
 
0 Fav
Post to Facebook
Tweet this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../../../favicon.ico"> <title>Pricing example for Bootstrap</title> <!-- Bootstrap core CSS --> <link href="../../css/editor.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="pricing.css" rel="stylesheet"> </head> <body> <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow"> <h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5> <nav class="my-2 my-md-0 mr-md-3"> <a class="p-2 text-dark" href="#">Features</a> <a class="p-2 text-dark" href="#">Enterprise</a> <a class="p-2 text-dark" href="#">Support</a> <a class="p-2 text-dark" href="#">Pricing</a> </nav> <a class="btn btn-outline-primary" href="#">Sign up</a> </div> <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center"> <h1 class="display-4">Hi <<LoggedInUser.FirstName>></h1> <p class="lead">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It's built with default Bootstrap components and utilities with little customization.</p> </div> <div class="container"> <div class="card-deck mb-3 text-center"> <div class="card mb-4 box-shadow"> <div class="card-header"> <h4 class="my-0 font-weight-normal">Your Referral Code</h4> </div> <div class="card-body"> <h1 class="card-title pricing-card-title"><<LoggedInUser.UserReferralCode>></h1> <ul class="list-unstyled mt-3 mb-4"> <li>If a new user registers with this code, he will be placed in your team (downline)</li> </ul> <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button> </div> </div> <div class="card mb-4 box-shadow"> <div class="card-header"> <h4 class="my-0 font-weight-normal">Your User Group</h4> </div> <div class="card-body"> <h1 class="card-title pricing-card-title"><<LoggedInUser.AccessLevel>></h1> <ul class="list-unstyled mt-3 mb-4"> <li>Depending on your activity, achievements or products you are entitled to different usergroups</li> </ul> <button type="button" class="btn btn-lg btn-block btn-primary">Get started</button> </div> </div> <div class="card mb-4 box-shadow"> <div class="card-header"> <h4 class="my-0 font-weight-normal">Your Account Balance</h4> </div> <div class="card-body"> <h1 class="card-title pricing-card-title">PDG: <<LoggedInUser.AccountBalance>></h1> <ul class="list-unstyled mt-3 mb-4"> <li>PlayDay7 guarantees and maintains a fixed conversion rate for PDG:TUSD of 1:1</li> </ul> <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button> </div> </div> </div><div class="card-deck mb-3 text-center"> <div class="card mb-4 box-shadow"> <div class="card-header"> <h4 class="my-0 font-weight-normal">Your Direct Referrals</h4> </div> <div class="card-body"> <h1 class="card-title pricing-card-title"><<COUNT User WHERE(User.SponserCode=LoggedInUser.UserReferralCode)>></h1> <ul class="list-unstyled mt-3 mb-4"> <li>This number of users are directly placed in your Firstline (registered with your ID)</li> </ul> <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button> </div> </div> <div class="card mb-4 box-shadow"> <div class="card-header"> <h4 class="my-0 font-weight-normal">Your Indirect Referrals</h4> </div> <div class="card-body"> <h1 class="card-title pricing-card-title"><<COUNT User WHERE(User.SponsersSponserCode=LoggedInUser.UserReferralCode)>></h1> <ul class="list-unstyled mt-3 mb-4"> <li>This number of users are placed in your second line (registered with an ID of one of your direct referrals</li> </ul> <button type="button" class="btn btn-lg btn-block btn-primary">Get started</button> </div> </div> <div class="card mb-4 box-shadow"> <div class="card-header"> <h4 class="my-0 font-weight-normal">Direct and Indirect</h4> </div> <div class="card-body"> <h1 class="card-title pricing-card-title"><<COUNT User WHERE(User.SponserCode=LoggedInUser.UserReferralCode OR User.SponsersSponserCode=LoggedInUser.UserReferralCode)>></h1> <ul class="list-unstyled mt-3 mb-4"> <li>This is the total number of users accounting for your direct and indirect commission</li> </ul> <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button> </div> </div> </div> <footer class="pt-4 my-md-5 pt-md-5 border-top"> <div class="row"> <div class="col-12 col-md"> <img class="mb-2" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="24" height="24"> <small class="d-block mb-3 text-muted">© 2017-2018</small> </div> <div class="col-6 col-md"> <h5>Features</h5> <ul class="list-unstyled text-small"> <li><a class="text-muted" href="#">Cool stuff</a></li> <li><a class="text-muted" href="#">Random feature</a></li> <li><a class="text-muted" href="#">Team feature</a></li> <li><a class="text-muted" href="#">Stuff for developers</a></li> <li><a class="text-muted" href="#">Another one</a></li> <li><a class="text-muted" href="#">Last time</a></li> </ul> </div> <div class="col-6 col-md"> <h5>Resources</h5> <ul class="list-unstyled text-small"> <li><a class="text-muted" href="#">Resource</a></li> <li><a class="text-muted" href="#">Resource name</a></li> <li><a class="text-muted" href="#">Another resource</a></li> <li><a class="text-muted" href="#">Final resource</a></li> </ul> </div> <div class="col-6 col-md"> <h5>About</h5> <ul class="list-unstyled text-small"> <li><a class="text-muted" href="#">Team</a></li> <li><a class="text-muted" href="#">Locations</a></li> <li><a class="text-muted" href="#">Privacy</a></li> <li><a class="text-muted" href="#">Terms</a></li> </ul> </div> </div> </footer> </div> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="../../js/vendor/popper.min.js"></script> <script src="../../js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/holderjs@2.9.4/holder.js"></script> <script> Holder.addTheme('thumb', { bg: '#55595c', fg: '#eceeef', text: 'Thumbnail' }); </script> </body> </html>
Related:
See More
Free Template
Full Calendar
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76