Get premium plans box code free. premium plans box design create using html, css and bootstrap

you can get code of responsive pricing table html snippet. we give you example of bootstrap premium pricing table , you can simple copy bellow code and use in your project. If it free snippets of pricing plans premium So you have to simple get those bellow code from tab of html, css and js. you simple click on HTML Code then you will get html code bootstrap responsive pricing table snippets, click on JS Code tab get code of jquery codd for responsive pricing table html snippets, same as for CSS Code tab. It's pretty easy and simple example of bootstrap 4 pricing table snippet.


<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-4 col-xs-12"> <div class="row planBox premium text-center"> <div class="col-md-12 section1"> <p>Premium</p> <h1><sup>$</sup>205<span>/ mo</span></h1> <button class="btn btn-block box1btn">Sign Up</button> </div> <div class="col-md-12 section2"> <p>Builder</p><br> <p>Email Previews</p><br> <p>Page Testing</p><br> <p>Filter</p><br> <p>2M Email Analytics Opens</p><br> <p>9 Users Free</p><br> </div> <div class="col-md-12 section3"> <button class="btn btn-block saveBtn">SAVE</button> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <div class="row planBox plus text-center"> <div class="col-md-12 section1"> <p>Plus</p> <h1><sup>$</sup>300<span>/ mo</span></h1> <button class="btn btn-block box1btn">Sign Up</button> </div> <div class="col-md-12 section2"> <p>Builder</p><br> <p>Email Previews</p><br> <p>Page Testing</p><br> <p>Filter</p><br> <p>2M Email Analytics Opens</p><br> <p>5 Users Free</p><br> </div> <div class="col-md-12 section3"> <button class="btn btn-block saveBtn">SAVE</button> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <div class="row planBox basic text-center"> <div class="col-md-12 section1"> <p>Basic</p> <h1><sup>$</sup>50<span>/ mo</span></h1> <button class="btn btn-block box1btn">Sign Up</button> </div> <div class="col-md-12 section2"> <p>Builder</p><br> <p>Email Previews</p><br> <p>Page Testing</p><br> <p><strike>Filter</strike></p><br> <p><strike>Email Analytics</strike></p><br> <p>5 Users Free</p><br> </div> <div class="col-md-12 section3"> <button class="btn btn-block saveBtn">SAVE</button> </div> </div> </div> </div> </div> </body> </html>
body{ background-color: #F0F0F0; padding-top: 30px; } .section-plan{ background-color:#f1f1f1; padding: 30px; } .planBox{ margin: 0px; border-radius:3px; border:1px solid #D8D8D8; } .section1{ border-radius:3px 3px 0px 0px; padding: 10px 15px 30px 15px; background-color: #BC2663; } .section1 p{ font-size:20px; color:#fff; } .section1 h1{ color:#fff; font-size:45px; margin-top:0px; } sup{ font-size: 12px; top: -1.9em; } .section1 span{ font-size: 12px; } .box1btn:hover, .box1btn{ background-color: #FFFFFF; color:#BC2663; } .saveBtn:hover, .saveBtn{ background-color: #BC2663; color:#fff; } .section2{ background-color: #fff; padding: 30px 0px 20px 0px; } .section2 p{ display: inline-block; border-bottom: 1px dotted #DDDDDD; } .section3{ padding: 15px; border-top:1px solid #DDDDDD; } .plus .section1{ background-color: #30408B; } .plus .saveBtn{ background-color: #30408B; } .plus .box1btn{ color:#30408B; } .basic .section1{ background-color:#EBA700; } .basic .box1btn{ color:#EBA700; } .basic .saveBtn{ background-color:#EBA700; }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post