Bootstrap Snippet Progress Report using HTML CSS Bootstrap

"Progress Report"
Bootstrap 3.1.0 Snippet by Vikeenz

3.1.0

1.5K 0 Fav

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>  <div class="progressTable"> <div id="rates" class=""> <div class="row head"> <div class="col-xs-3 col-sm-6"> </div> <div class="col-xs-3 col-sm-2"> <span>2015</span> Jan 1 - Dec 31 </div> <div class="col-xs-3 col-sm-2"> <span>2016</span> Jan 1 - Dec 31 </div> <div class="col-xs-3 col-sm-2"> <span>2017</span> Jan 1 - Current </div> </div> <div class="row sectionTitleArea"> <div class="col-xs-12 col-sm-12"> <div class="sectionTitle">Total Inspections</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total Inspections</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">7,585</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">7,102</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">801</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total Inspections with Violations </div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">4471</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">3049</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">394</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total Inspections without Violations</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">2039</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">3086</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">374</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total Inspections with OOS</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">979</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">653</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">74</div> </div> </div> <div class="row sectionTitleArea"> <div class="col-xs-12 col-sm-12"> <div class="sectionTitle">Weigh Station Facility Inspections</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total Inspections</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">79</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">253</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">14</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total inspections with Violations </div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">179</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">63</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">34</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total Inspections without Violations</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">159</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">73</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">54</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total Inspections with OOS</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">159</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">73</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">54</div> </div> </div> <div class="row sectionTitleArea"> <div class="col-xs-12 col-sm-12"> <div class="sectionTitle">Roadside Inspections</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total Inspections</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">79</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">253</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">14</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total inspections with Violations </div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">179</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">63</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">34</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total Inspections without Violations</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">159</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">73</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">54</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total Inspections with OOS</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">159</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">73</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">54</div> </div> </div> <div class="row sectionTitleArea"> <div class="col-xs-12 col-sm-12"> <div class="sectionTitle">Travel Type Inspections</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total <span class="progressName">Interstate</span> Inspections</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">479</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">453</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">24</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total <span class="progressName">Intrastate</span> Inspections</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">579</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">353</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">54</div> </div> </div> <div class="row sectionTitleArea"> <div class="col-xs-12 col-sm-12"> <div class="sectionTitle">Inspection Type</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total <span class="progressName">Driver</span> Inspections</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">179</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">253</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">14</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total <span class="progressName">Driver</span> Inspections with OOS</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">279</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">153</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">34</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total <span class="progressName">Vehicle</span> Inspections</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">179</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">253</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">14</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total <span class="progressName">Vehicle</span> Inspections with OOS</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">279</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">153</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">34</div> </div> </div> <div class="row sectionTitleArea"> <div class="col-xs-12 col-sm-12"> <div class="sectionTitle">Unsafe Driving Basic</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total <span class="progressName">Unsafe Driving</span> Inspections</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">179</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">253</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">14</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total <span class="progressName">Unsafe Driving</span> Inspections with Violations</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">279</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">153</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">34</div> </div> </div> <div class="row sectionTitleArea"> <div class="col-xs-12 col-sm-12"> <div class="sectionTitle">Hours of Service Basic</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total <span class="progressName">Hours of Service</span> Inspections</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">79</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">253</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">14</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total <span class="progressName">Hours of Service</span> Inspections with Violations</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">179</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">253</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">34</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total <span class="progressName">Hours of Service</span> Inspections with OOS</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">679</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">353</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">54</div> </div> </div> <div class="row sectionTitleArea"> <div class="col-xs-12 col-sm-12"> <div class="sectionTitle">Driver Fitness Basic</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total <span class="progressName">Driver Fitness</span> Inspections</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">79</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">253</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">14</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total <span class="progressName">Driver Fitness</span> Inspections with Violations</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">179</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">63</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">34</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total <span class="progressName">Driver Fitness</span> Inspections with OOS</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">159</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">73</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">54</div> </div> </div> <div class="row sectionTitleArea"> <div class="col-xs-12 col-sm-12"> <div class="sectionTitle">Controlled Substance and Alcohol Basic</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total <span class="progressName">Controlled Substance and Alcohol</span> Inspections</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">79</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">253</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">14</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total <span class="progressName">Controlled Substance and Alcohol</span> Inspections with Violations</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">179</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">63</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">34</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total <span class="progressName">Vehicle Maintance</span> Inspections with OOS</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">300</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">150</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">100</div> </div> </div> <div class="row sectionTitleArea"> <div class="col-xs-12 col-sm-12"> <div class="sectionTitle">Vehicle Maintance Basic</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total <span class="progressName"> Vehicle Maintance</span> Inspections</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">79</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">253</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">14</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total <span class="progressName"> Vehicle Maintance</span> Inspections with Violations</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">179</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">63</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">34</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total <span class="progressName">Vehicle Maintance</span> Inspections with OOS</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">300</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">150</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">100</div> </div> </div> <div class="row sectionTitleArea"> <div class="col-xs-12 col-sm-12"> <div class="sectionTitle">Hazardous Materials Basic</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total <span class="progressName">Hazardous Materials</span> Inspections</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">79</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">253</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">14</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total <span class="progressName">Hazardous Materials</span> Inspections with Violations</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">179</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">63</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">34</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total <span class="progressName">Hazardous Materials</span> Inspections with OOS</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">300</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">150</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">100</div> </div> </div> <div class="row sectionTitleArea"> <div class="col-xs-12 col-sm-12"> <div class="sectionTitle">Crash Indicator Basic</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total <span class="progressName">Crashes</span></div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">54</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">33</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">5</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total <span class="progressName">Crashes</span> with Injuries</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">15</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">10</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">0</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total <span class="progressName">Crashes</span> with Tow Away</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">9</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">9</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">9</div> </div> </div> <div class="row sectionTitleArea"> <div class="col-xs-12 col-sm-12"> <div class="sectionTitle">Crash Data Road Surface Conditions</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total w/ <span class="progressName">Dry </span>Conditions</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">4</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">3</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">5</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total w/ <span class="progressName">Ice </span>Conditions</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">5</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">3</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">4</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total w/ <span class="progressName">SandMudDirtOil or Gravel </span>Conditions</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">9</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">9</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">9</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total w/ <span class="progressName">Slush </span>Conditions</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">8</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">6</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">5</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total w/ <span class="progressName">Snow </span>Conditions</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">1</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">4</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">9</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total w/ <span class="progressName">Unkown </span>Conditions</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">5</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">2</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">3</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total w/ <span class="progressName">Water (Standing Moving) </span>Conditions</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">12</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">7</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">0</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total w/ <span class="progressName">Wet </span>Conditions</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">4</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">4</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">2</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total w/ <span class="progressName">Other </span>Conditions</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">5</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">9</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">0</div> </div> </div> <div class="row sectionTitleArea"> <div class="col-xs-12 col-sm-12"> <div class="sectionTitle">Crash Data Light Conditions</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total w/ <span class="progressName">Dark - Lighted </span>Conditions</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">4</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">3</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">5</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total w/ <span class="progressName">Dark - Not Lighted </span>Conditions</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">5</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">3</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">4</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total w/ <span class="progressName">Dark - Unknown Roadway Lighting </span>Conditions</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">9</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">9</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">9</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total w/ <span class="progressName">Dawn </span>Conditions</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">8</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">6</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">5</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total w/ <span class="progressName">Daylight </span>Conditions</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">1</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">4</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">9</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total w/ <span class="progressName">Dusk </span>Conditions</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">5</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">2</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">3</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total w/ <span class="progressName">Other </span>Conditions</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">12</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">7</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">0</div> </div> </div> <div class="row"> <div class="col-xs-3 col-sm-6"> <div class="item">Total w/ <span class="progressName">Unknown </span>Conditions</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">4</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">4</div> </div> <div class="col-xs-3 col-sm-2"> <div class="item">2</div> </div> </div> </div> </div>

.progressTable { margin-left: 40px; margin-right: 40px; padding-bottom: 30px; } #progressReport { background-color: #ffffff !important; } .glyphicon-ok { color: green; font-size: 20px; font-weight: bold; } .glyphicon-remove { color: red; font-size: 20px; font-weight: bold; } .progressName{ color: #6d1f7e; font-weight:bolder; } .sectionTitleArea{ background-color: #D84315; } .sectionTitle{ color:#ffffff; padding:10px 10px; font-weight:bold; } #rates { width: 100%; font-size: 12px; color: #444; font-weight: bold; } #rates .row > div { display: table; padding: 0 4px; border-right: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; text-align: center; } #rates .row > div .item { height: 110px; width: 100%; display: table-cell; vertical-align: middle; } #rates .row > div:first-child { border-left: 1px solid #e6e6e6; text-align: left; } #rates .row.head > div { border-right: none; height: 100px; } #rates .row.head > div:first-child { border-left: none; } #rates .row.head span { display: block; font-size: 14px; font-weight: bold; } #rates .row.head .form-btn { display: block; } #rates .row.head .form-btn a { display: inline-block; margin-top: 14px; padding: 0 6px; border: 1px solid #428bca; border-radius: 10px; } @media (min-width: 768px) { #rates { font-size: 16px; } #rates .row > div { padding: 0 15px; } #rates .row > div .item { height: 80px; } #rates .row.head > div { height: 60px; } #rates .row.head span { font-size: 20px; } #rates .row.head .form-btn a { padding: 0 10px; } }

Questions / Comments:

Posting GuidelinesFormatting