social dashboard widgets

Bootstrap snippet. social dashboard widgets, this snippet was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code.
tags: widget,panel

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<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>

CSS code

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

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;
}
                                    

Similar snippets

Bootstrap snippet bs4 new friends panel

bs4 new friends panel

View

Bootstrap snippet Most Recent Signups panel

Most Recent Signups panel

View

Bootstrap snippet friends panel list

friends panel list

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Jul 2nd 2015, 00:05

Views: 339