social dashboard widgets

This bootstrap snippet called "social dashboard widgets" 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

This is the HTML code for this bootstrap snippet

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

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

This is the CSS code for this bootstrap snippet

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

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

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Jul 2nd 2015, 00:05

Views: 325