Bootstrap snippet: social dashboard widgets

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: widget,panel



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container bootstrap snippet"> <div class="row"> <div class="col-md-3"> <div class="panel rounded shadow"> <div class="panel-heading text-center bg-youtube"> <p class="inner-all no-margin"> <i class="fa fa-youtube fa-5x"></i> </p> </div><!-- /.panel-heading --> <div class="panel-body text-center"> <p class="h4 no-margin inner-all text-strong"> <span class="block">342</span> <span class="block">Videos</span> </p> </div><!-- /.panel-body --> </div> </div> <div class="col-md-3"> <div class="panel rounded shadow"> <div class="panel-heading text-center bg-dribbble"> <p class="inner-all no-margin"> <i class="fa fa-dribbble fa-5x"></i> </p> </div><!-- /.panel-heading --> <div class="panel-body text-center"> <p class="h4 no-margin inner-all text-strong"> <span class="block">2,341</span> <span class="block">Designs</span> </p> </div><!-- /.panel-body --> </div> </div> <div class="col-md-3"> <div class="panel rounded shadow"> <div class="panel-heading text-center bg-soundcloud"> <p class="inner-all no-margin"> <i class="fa fa-soundcloud fa-5x"></i> </p> </div><!-- /.panel-heading --> <div class="panel-body text-center"> <p class="h4 no-margin inner-all text-strong"> <span class="block">34,282</span> <span class="block">Musics</span> </p> </div><!-- /.panel-body --> </div> </div> </div> </div>
body{ background:#eee; margin-top:20px; } .shadow { -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05) !important; -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05) !important; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05) !important; } .rounded { -webkit-border-radius: 3px !important; -moz-border-radius: 3px !important; border-radius: 3px !important; } .panel { border: none; position: relative; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .panel .panel-heading { padding: 10px; border-top-right-radius: 3px; border-top-left-radius: 3px; border-bottom: 1px solid #dddddd; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .no-margin { margin: 0 !important; } .bg-youtube p { color: white; } .bg-youtube { background-color: #c4302b !important; border: 1px solid #c4302b; color: white; } .bg-dribbble { background-color: #ea4c89 !important; border: 1px solid #ea4c89; color: white; } .bg-soundcloud { background-color: #ff7700 !important; border: 1px solid #ff7700; color: white; }
Dey-Dey

social dashboard widgets

Dey-Dey
  Jul 2nd 2015, 00:05
123 Views