"Resonsive Features Comparison table without JS"
Bootstrap 3.3.0 Snippet by jskrishna

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 ----------> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> </head> <body> <section class="features_table"> <div class="container "> <div class="col-sm-8 col-8 col-xs-12 no-padding"> <div class="features-table"> <ul> <h1>Features</h1> <li>Use individual PNGs (or JSON spritesheets) from any source to animate </li> <li>Animate with bones or by controlling images directly</li> <li>Adjust pivot points for each image</li> <li>Scale and rotate any object per frame</li> <li>Set the opacity of any object per frame</li> <li>Basic easing features</li> <li>Advanced easing curve options</li> <li>Create multiple “entities” (animation sets) per file</li> <li>Onion skinning to see previous and up-coming key-frames</li> <li>Basic IK (inverse kinematics) support</li> <li>Full IK support and IK locking (forward kinematics) </li> <li>Use animations within animations to make complex scenes easily</li> <li>Advanced automated control features for animations within animations</li> <li>Create character variations by swapping image sets (Character maps)</li> <li>Trigger and preview sound effects at any point in the timeline</li> <li>Lip-sync via Papagayo</li> <li> Export animations as PNG images, strips, sheets or Gif Animations </li> <li>Add custom watermarks while exporting images or Gifs</li> <li>Automatically import sequential images as animated sprites</li> <li>Create named collision rectangles per frame</li> <li>Automatically import sequential images as animated sprites</li> <li> Create named action points per frame and set their angle </li> <li>Create horizontal and vertical guidelines on the canvas</li> <li>Lock or hide individual objects to protect or hide things as you work</li> <li>Set “animated” variables for your character anywhere in the timeline</li> <li>Create “Triggers” anywhere in the timeline to initiate actions in-game</li> <li>Set “Tags” to any part of the timeline to designate “state changes”</li> <li>Merge separate Spriter projects into one (Great for teams making games)</li> <li>Auto update detection</li> <li>Auto save feature</li> <li>Deformable sprites (image warping) COMING SOON</li> <li>Over 260 Free Spriter Animations (for use in your games royalty free)</li> </ul> </div> </div> <div class="col-sm-2 col-2 col-xs-12 no-padding"> <div class="features-table-free"> <ul> <h1>Free</h1> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-times"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-times"></i></li> <li><i class="fa fa-times"></i></li> <li><i class="fa fa-times"></i></li> <li><i class="fa fa-times"></i></li> <li><i class="fa fa-times"></i></li> <li><i class="fa fa-times"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-times"></i></li> <li><i class="fa fa-times"></i></li> <li><i class="fa fa-times"></i></li> <li><i class="fa fa-times"></i></li> <li><i class="fa fa-times"></i></li> <li><i class="fa fa-times"></i></li> <li><i class="fa fa-times"></i></li> <li><i class="fa fa-times"></i></li> <li><i class="fa fa-times"></i></li> <li><i class="fa fa-times"></i></li> <li><i class="fa fa-times"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-times"></i></li> <li><i class="fa fa-times"></i></li> </ul> </div> </div> <div class="col-sm-2 col-2 col-xs-12 no-padding"> <div class="features-table-paid"> <ul> <h1>Pro</h1> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> </ul> </div> </div> </div> </section> </body> </html>
.features_table h1{ font-size:25px !important; } li{ list-style:none; } h1{ font-size:21px !important; } .features-table li { background: #da9748 none repeat scroll 0 0; border-bottom: 2px solid #e5a253; color: #f1f1f1; font-size: 16px; padding: 15px 24px; } .features-table li:hover{ background: #e5a253; cursor:pointer; -webkit-transition: all .35s; -moz-transition: all .35s; transition: all .35s; } .features-table-free li, .features-table-paid li { background: #efefef none repeat scroll 0 0; border-bottom: 2px solid #d4d4d4; text-align:center; padding: 16.4px 21px; cursor:pointer; } .features-table-free h1, .features-table-paid h1 { text-align: center; } .features-table-free li:hover, .features-table-paid li:hover { background: #dedede none repeat scroll 0 0; -webkit-transition: all .35s; -moz-transition: all .35s; transition: all .35s; } .features_table h1 { font-size: 23px !important; } .features-table h1, .features-table-free h1, .features-table-paid h1 { background: #6b6b6b none repeat scroll 0 0; color: #fff; font-weight: 600; margin: 0; padding: 19px 21px; text-transform: uppercase; } .features-table h1 { border-top-left-radius: 20px; text-align:center; } .features-table-paid h1 { border-top-right-radius: 20px; } .features-table-free li { border-right: 2px solid #d4d4d4; } .fa.fa-check { color: #2cc14f; } .fa.fa-times { color: #BA5340; } .fa{ font-size:30px; } .no-padding{ padding:0; } ul{ padding:0; } body { counter-reset: section; /* Set the section counter to 0 */ } .features-table li::before { counter-increment: section; /* Increment the section counter*/ content: "" counter(section) ": "; /* Display the counter */ }

Related: See More

Paper Kit 2 Angular
Bootstrap Tabs with Table
Creative Princing Table
BS4 Simple & Clean Pricing table

Questions / Comments:

Please fix for Bootstrap 4.0.0+

Michael () - 8 years ago - Reply 0

box sizes aren't consistent or they are shifted. good job otherwise.

Jordan George () - 9 years ago - Reply 0

Thanks you i'll fix bug.

JS Krishna () - 9 years ago - Reply 0

in mobile view table is not meaningful.

sooraj () - 9 years ago - Reply 0

bugged with chrome, the lasts rows was shifted

Benji Lamalice () - 9 years ago - Reply 0