In this tutorial, I am going to share responsive features comparison table using Bootstrap with the example. We have created this responsive features comparison table using the Bootstrap framework and CSS code.
Follow the below steps to create contact us form:
Step 1) Include the below JS & CSS code in your HEAD tag.
1 2 3 4 5 | <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> |
Step 2) Add the below CSS code before HEAD tage close.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | .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 Posts: How to create product quick view popup using HTML CSS Bootstrap
Step 3) Add the following HTML code inside the BODY tag.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <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> </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-times"></i></li> <li><i class="fa fa-check"></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> </ul> </div> </div> </div> </section> |
Related Posts: How to Create TreeView Using Bootstrap
After followed the above steps the responsive features comparison table.
Do you like & share this article with your friends, and don’t forget to follow us on Facebook and Twitter to learn cool Bootstrap tutorials.
If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.
