Bootstrap snippet: Features

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: Bootstrap,snippet,features,list,menu



<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"> <div class="container bootstrap snippet"> <section id="content" class="current"> <div class="container text-center"> <div class="row"> <div class="col-sm-12 col-md-12 col-lg-12"> <h2>Beautiful Design</h2> <h2 style="font-size: 60px;line-height: 60px;margin-bottom: 20px;font-weight: 900;">With <span class="highlight">Impressive Features</span></h2> <p>All the features you need to create an amazing website.</p> </div> </div> <div class="row"> <div class="col-lg-offset-1 col-sm-12 col-md-12 col-lg-10"> <div class="features-list"> <div class="row"> <div class="col-sm-6 col-md-4 col-lg-4"> <div class="feature-block bootdey" style="visibility: visible;"> <div class="ico fa fa-magic"></div> <div class="name"> Premium Design </div> <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames </div> <div class="more"> <a href="#" class="btn btn-default btn-sm">Read more</a> </div> </div> </div> <div class="col-sm-6 col-md-4 col-lg-4"> <div class="feature-block bootdey" style="visibility: visible;"> <div class="ico fa fa-magnet"></div> <div class="name"> SEO Optimized </div> <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames </div> <div class="more"> <a href="#" class="btn btn-default btn-sm">Read more</a> </div> </div> </div> <div class="col-sm-6 col-md-4 col-lg-4"> <div class="feature-block bootdey" style="visibility: visible;"> <div class="ico fa fa-gift"></div> <div class="name"> Bonus: PSDs Included </div> <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames </div> <div class="more"> <a href="#" class="btn btn-default btn-sm">Read more</a> </div> </div> </div> <div class="col-sm-6 col-md-4 col-lg-4"> <div class="feature-block bootdey" style="visibility: visible;"> <div class="ico fa fa-cubes"></div> <div class="name"> Custom UI Elements </div> <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames </div> <div class="more"> <a href="#" class="btn btn-default btn-sm">Read more</a> </div> </div> </div> <div class="col-sm-6 col-md-4 col-lg-4"> <div class="feature-block bootdey" style="visibility: visible;"> <div class="ico fa fa-expand"></div> <div class="name"> Fully Responsive </div> <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames </div> <div class="more"> <a href="#" class="btn btn-default btn-sm">Read more</a> </div> </div> </div> <div class="col-sm-6 col-md-4 col-lg-4"> <div class="feature-block bootdey" style="visibility: visible;"> <div class="ico fa fa-send-o"></div> <div class="name"> Contact Form </div> <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames </div> <div class="more"> <a href="#" class="btn btn-default btn-sm">Read more</a> </div> </div> </div> </div> </div> </div> </div> </div> </section> </div>
h2 { font-size: 50px; font-weight: 300; margin-bottom: 10px; line-height: 50px; } .highlight { color: #2ac5ed; } #content { padding: 70px 0; } #content .features-list { padding-top: 35px; } .features-list .feature-block { margin-bottom: 18px; } .features-list .feature-block .ico { font-size: 37px; line-height: 70px; width:70px; height: 70px; background: #5accff; display: inline-block; border-radius: 50%; color: #FFFFFF; margin-bottom: 10px; } .features-list .feature-block.bottom-line .ico { width: auto; height: auto; background: transparent; color: #5accff; text-align: center; font-size: 41px; vertical-align: top; margin-top: -10px; } .features-list .feature-block.bottom-line .fa-github { font-size: 50px; } .features-list .feature-block.bottom-line .fa-dashboard { font-size: 45px; margin-top: -15px; } .features-list .feature-block.bottom-line .ico { float: left; margin-right: 15px; margin-left: 21px; } .features-list .feature-block.bottom-line .features-content { padding-right: 15px; display: table; } .features-list .feature-block.bottom-line .features-content .name { margin-bottom: 5px; } .features-list .feature-block.bottom-line .features-content .subname { font-size: 16px; margin-bottom: 12px; } .features-list .feature-block .name { font-size: 20px; line-height: 1.25em; font-weight: bold; margin-bottom: 10px; } .features-list .feature-block .text { font-size: 12px; line-height: normal; margin-bottom: 15px; }
Dey-Dey

Features

Dey-Dey
  Aug 24th 2014, 11:20
5.3K Views