<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <div class="container"> <h2>Feature Comparison Table</h2> <div class="row feature-table"> <div class="col-sm-3 feature-block th1"> <div class="feature-table-icon feature-table-icon-1"> <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#fff"/></svg> <!-- <img class="img-responsive img-circle" src="/img/testimonials/Merel-Keuning-min.jpg" alt="Merel Keuning at MK Reflexology"> --> </div> <div class="price">£<span>35</span></div> <div class="price-int">per hour</div> <h3>PAYG</h3> <p>Feature 1</p> <p>Feature 2</p> <p>Feature 3</p> <p>-</p> <p>-</p> <p>-</p> </div> <div class="col-sm-3 feature-block th2"> <div class="feature-table-icon feature-table-icon-2"> <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#fff"/></svg> </div> <div class="price">£<span>30</span></div> <div class="price-int">per month</div> <h3>Basic</h3> <p>Feature 1</p> <p>Feature 2</p> <p>Feature 3</p> <p>Feature 4</p> <p>-</p> <p>-</p> </div> <div class="col-sm-3 feature-block th3"> <div class="feature-table-icon feature-table-icon-3"> <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#fff"/></svg> </div> <div class="price">£<span>55</span></div> <div class="price-int">per month</div> <h3>Business</h3> <p>Feature 1</p> <p>Feature 2</p> <p>Feature 3</p> <p>Feature 4</p> <p>Feature 5</p> <p>-</p> </div> <div class="col-sm-3 feature-block th4"> <div class="feature-table-icon feature-table-icon-4"> <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#fff"/></svg> </div> <div class="price">£<span>100</span></div> <div class="price-int">per month</div> <h3>Enterprise</h3> <p>Feature 1</p> <p>Feature 2</p> <p>Feature 3</p> <p>Feature 4</p> <p>Feature 5</p> <p>Feature 6</p> </div> </div> </div>

.feature-table .feature-block { /*flex: 1;*/ background-color: #476481; color: #fff; padding: 40px; text-align: center; } @media(min-width:768px){ .feature-table { display: flex; } .feature-table .feature-block { flex: 1; } } .feature-table h3 { color: #fff; font-size: 24px; font-weight: 700; } .feature-table .th1 { background-color: #476481; } .feature-table .th2 { background-color: #3e5871; } .feature-table .th3 { background-color: #354b60; } .feature-table .th4 { background-color: #2c3e50; } .feature-table-icon { background-color: #6b839a; border-radius: 50%; border: 1px solid #3e5871; width: 115px; height: 115px; padding: 20px; margin-left: auto; margin-right: auto; margin-bottom: 20px; } .feature-table-icon-1 { background-color: #6B839A; border-color: #3e5871; } .feature-table-icon-2 { background-color: #476481; border-color: #354b60; } .feature-table-icon-3 { background-color: #3E5871; border-color: #2c3e50; } .feature-table-icon-4 { background-color: #354B60; border-color: #233140; } .feature-table-icon svg { width: 100%; } .feature-table .price { font-size: 32px; font-weight: 700; } .feature-table .price span { font-size: 52px; font-weight: 100; } .feature-table .price-int { font-size: 18px; font-weight: 100; }