Bootstrap snippet: box colored

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.



<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container bootstrap snippet"> <div class="row margin-bottom-10"> <div class="col-md-4 col-sm-6"> <div class="servive-block servive-block-grey"> <i class="icon-2x color-light fa fa-bell-o"></i> <h2 class="heading-md">Grey Box</h2> <p>Donec id elit non mi porta gravida at eget metus id elit mi egetine. Fusce dapibus</p> </div> </div> <div class="col-md-4 col-sm-6"> <div class="servive-block servive-block-yellow"> <i class="icon-2x color-light fa fa-envelope"></i> <h2 class="heading-md">Yellow Box</h2> <p>Donec id elit non mi porta gravida at eget metus id elit mi egetine usce dapibus elit nondapibus</p> </div> </div> <div class="col-md-4 col-sm-12"> <div class="servive-block servive-block-dark-blue"> <i class="icon-2x color-light fa fa-gift"></i> <h2 class="heading-md">Dark Blue Box</h2> <p>Donec id elit non mi porta gravida at eget metus id elit mi egetine. Fusce dapibus</p> </div> </div> </div> <div class="row margin-bottom-10"> <div class="col-sm-6"> <div class="servive-block servive-block-purple"> <i class="icon-2x color-light fa fa-globe"></i> <h2 class="heading-md">Purple Box</h2> <p>Donec id elit non mi porta gravida at eget metus id elit mi egetine. Fusce dapibus. At vero eos et accusamus et iusto odio dignissimos ducimus qui.</p> </div> </div> <div class="col-sm-6"> <div class="servive-block rounded servive-block-aqua"> <i class="icon-2x color-light fa fa-taxi"></i> <h2 class="heading-md">Aqua Box</h2> <p>Donec id elit non mi porta gravida at eget metus id elit mi egetine. Fusce dapibus. At vero eos et accusamus et iusto odio dignissimos ducimus qui.</p> </div> </div> </div> </div>
i.icon-2x { font-size: 30px; } .color-light{ color:#FFFFFF; } /*Colored Content Boxes ------------------------------------*/ .servive-block { padding: 20px 30px; text-align: center; margin-bottom: 20px; } .servive-block p, .servive-block h2 { color: #fff; } .servive-block h2 a:hover{ text-decoration: none; } .servive-block-light, .servive-block-default { background: #fafafa; border: solid 1px #eee; } .servive-block-default:hover { box-shadow: 0 0 8px #eee; } .servive-block-light p, .servive-block-light h2, .servive-block-default p, .servive-block-default h2 { color: #555; } .servive-block-u { background: #72c02c; } .servive-block-blue { background: #3498db; } .servive-block-red { background: #e74c3c; } .servive-block-sea { background: #1abc9c; } .servive-block-grey { background: #95a5a6; } .servive-block-yellow { background: #f1c40f; } .servive-block-orange { background: #e67e22; } .servive-block-green { background: #2ecc71; } .servive-block-purple { background: #9b6bcc; } .servive-block-aqua { background: #27d7e7; } .servive-block-brown { background: #9c8061; } .servive-block-dark-blue { background: #4765a0; } .servive-block-light-green { background: #79d5b3; } .servive-block-dark { background: #555; } .servive-block-light { background: #ecf0f1; }
Dey-Dey

box colored

Dey-Dey
  Dec 1st 2014, 09:01
23.0K Views