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

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-6 col-6 col-xs-12 no-padding"> <div class="features-table"> <ul> <h1>Features</h1> <li>Activate untapped volunteers</li> <li>Social Network Integration</li> <li>Imports into both NGP VAN and Organizer</li> <li>Verify canvassers are at every house they log.</li> <li>Add custom filters to screen your data.</li> <li>Advanced machine learning filters.</li> <li>Identify new talent and potential hires.</li> <li>Digital training resources for volunteers.</li> </ul> </div> </div> <div class="col-sm-2 col-2 col-xs-12 no-padding"> <div class="features-table-free"> <ul> <h1>We GOTV</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> </ul> </div> </div> <div class="col-sm-2 col-2 col-xs-12 no-padding"> <div class="features-table-free"> <ul> <h1>NGP VAN</h1> <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> </ul> </div> </div> <div class="col-sm-2 col-2 col-xs-12 no-padding"> <div class="features-table-paid"> <ul> <h1>Organizer</h1> <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> </ul> </div> </div> </div> </section> </body> </html>
.features_table { padding-top: 2em; } .features_table h1{ font-size:25px !important; } li{ list-style:none; } h1{ font-size:21px !important; } .features-table li { background: #332f84 none repeat scroll 0 0; border-bottom: 2px solid #d4d4d4; border-left: 5px solid #231861; color: #fff; font-size: 19px; padding: 15px 24px; font-weight: 600; } .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: #f4f9fd none repeat scroll 0 0; border-bottom: 2px solid #d4d4d4; border-right: 5px solid #231861; text-align:center; padding: 16px 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: #231861 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; font-size: 1.75em; } .fa.fa-times { color: #BA5340; font-size: 1.75em; } .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 */ }

Questions / Comments: