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

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-4 col-4 col-xs-12 no-padding"> <div class="features-table"> <ul> <h1>Features</h1> <li>Banner in homepage forever </li> <li>You can the winner of 50.000 $ contest </li> <li>Post about your startup on our channels</li> <li>Post about your startup during the contest</li> <li>Your startup in our sponsored post</li> </ul> </div> </div> <div class="col-sm-2 col-2 col-xs-12 no-padding"> <div class="features-table-free"> <ul> <h1>1-23</h1> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-"></i></li> <li><i class="fa fa-"></i></li> <li><i class="fa fa-"></i></li> </ul> </div> </div> <div class="col-sm-2 col-2 col-xs-12 no-padding"> <div class="features-table-free"> <ul> <h1>24-51</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-"></i></li> <li><i class="fa fa-"></i></li> </ul> </div> </div> <div class="col-sm-2 col-2 col-xs-12 no-padding"> <div class="features-table-free"> <ul> <h1>52-99</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-"></i></li> </ul> </div> </div> <div class="col-sm-2 col-2 col-xs-12 no-padding"> <div class="features-table-paid"> <ul> <h1>>=100</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> </ul> </div> </div> </div> </section> </body> </html>
li{ list-style:none; } h1{ font-size:21px !important; } .features-table li { background: #79b15a none repeat scroll 0 0; border-bottom: 2px solid #79a01a; color: #f1f1f1; font-size: 16px; padding: 15px 24px; } .features-table li:hover{ background: #79a01a; 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 { text-align:center; } .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

Material Dashboard
Bootstrap Tabs with Table
Creative Princing Table
BS4 Simple & Clean Pricing table

Questions / Comments: