"Social Dashboard"
Bootstrap 3.0.0 Snippet by BhaumikPatel

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="list-group"> <a href="http://www.jquery2dotnet.com" class="list-group-item visitor"> <h3 class="pull-right"> <i class="fa fa-eye"></i> </h3> <h4 class="list-group-item-heading count"> 1000</h4> <p class="list-group-item-text"> Profile Views</p> </a><a href="http://www.jquery2dotnet.com" class="list-group-item facebook-like"> <h3 class="pull-right"> <i class="fa fa-facebook-square"></i> </h3> <h4 class="list-group-item-heading count"> 1000</h4> <p class="list-group-item-text"> Facebook Likes</p> </a><a href="http://www.jquery2dotnet.com" class="list-group-item google-plus"> <h3 class="pull-right"> <i class="fa fa-google-plus-square"></i> </h3> <h4 class="list-group-item-heading count"> 1000</h4> <p class="list-group-item-text"> Google+</p> </a><a href="http://www.jquery2dotnet.com" class="list-group-item twitter"> <h3 class="pull-right"> <i class="fa fa-twitter-square"></i> </h3> <h4 class="list-group-item-heading count"> 1000</h4> <p class="list-group-item-text"> Twitter Followers</p> </a> </div> </div> <div class="col-md-3"> <div class="list-group"> <a href="http://www.jquery2dotnet.com" class="list-group-item tumblr"> <h3 class="pull-right"> <i class="fa fa-tumblr-square"></i> </h3> <h4 class="list-group-item-heading count"> 1000</h4> <p class="list-group-item-text"> Tumblr</p> <a href="http://www.jquery2dotnet.com" class="list-group-item linkedin"> <h3 class="pull-right"> <i class="fa fa-linkedin-square"></i> </h3> <h4 class="list-group-item-heading count"> 1000</h4> <p class="list-group-item-text"> Linkedin</p> </a></a><a href="http://www.jquery2dotnet.com" class="list-group-item youtube"> <h3 class="pull-right"> <i class="fa fa-youtube-play"></i> </h3> <h4 class="list-group-item-heading count"> 1000</h4> <p class="list-group-item-text"> Youtub Play</p> </a><a href="http://www.jquery2dotnet.com" class="list-group-item vimeo"> <h3 class="pull-right"> <i class="fa fa-vimeo-square"></i> </h3> <h4 class="list-group-item-heading count"> 1000</h4> <p class="list-group-item-text"> Vimeo</p> </a> </div> </div> </div> </div>
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"); body { margin-top:20px; } .fa { font-size: 50px;text-align: right;position: absolute;top: 7px;right: 27px;outline: none; } a { transition: all .3s ease;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease; } /* Visitor */ a.visitor i,.visitor h4.list-group-item-heading { color:#E48A07; } a.visitor:hover { background-color:#E48A07; } a.visitor:hover * { color:#FFF; } /* Facebook */ a.facebook-like i,.facebook-like h4.list-group-item-heading { color:#3b5998; } a.facebook-like:hover { background-color:#3b5998; } a.facebook-like:hover * { color:#FFF; } /* Google */ a.google-plus i,.google-plus h4.list-group-item-heading { color:#dd4b39; } a.google-plus:hover { background-color:#dd4b39; } a.google-plus:hover * { color:#FFF; } /* Twitter */ a.twitter i,.twitter h4.list-group-item-heading { color:#00acee; } a.twitter:hover { background-color:#00acee; } a.twitter:hover * { color:#FFF; } /* Linkedin */ a.linkedin i,.linkedin h4.list-group-item-heading { color:#0e76a8; } a.linkedin:hover { background-color:#0e76a8; } a.linkedin:hover * { color:#FFF; } /* Tumblr */ a.tumblr i,.tumblr h4.list-group-item-heading { color:#34526f; } a.tumblr:hover { background-color:#34526f; } a.tumblr:hover * { color:#FFF; } /* Youtube */ a.youtube i,.youtube h4.list-group-item-heading { color:#c4302b; } a.youtube:hover { background-color:#c4302b; } a.youtube:hover * { color:#FFF; } /* Vimeo */ a.vimeo i,.vimeo h4.list-group-item-heading { color:#44bbff; } a.vimeo:hover { background-color:#44bbff; } a.vimeo:hover * { color:#FFF; }
// Animate the element's value from x to y: $({ someValue: 0 }).animate({ someValue: Math.floor(Math.random() * 3000) }, { duration: 3000, easing: 'swing', // can be anything step: function () { // called on every step // Update the element's text with rounded-up value: $('.count').text(commaSeparateNumber(Math.round(this.someValue))); } }); function commaSeparateNumber(val) { while (/(\d+)(\d{3})/.test(val.toString())) { val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"); } return val; }

Related: See More


Questions / Comments:

http://i.imgur.com/SQob3QP.png - This is what I get... what am I doing wrong?

bulqr4eto () - 8 years ago - Reply 0


thanks. it is a great one.

Regan Jones () - 10 years ago - Reply 0


You'll have to excuse my noobishness.

I'd like to use this snippet and have already put the code in place on my test server and it works. =) Although I have no idea where those numbers are coming from!

So, where do those numbers come from?
Where are they stored?
Can you set an initial value? (if not no big thing)

I'm new to the bootstrap thing so I'm trying things out hit and miss to see how they work and interact. Any help is greatly appreciated!

Dave () - 10 years ago - Reply 0


What may be confusing you is that the graphic shows 2078 followers / likes etc. but the html shows 1000. I assume the graphic is being generated by a different piece of html.

Anyway, what you need to know - and apologies if you do already - is that bootsnipps almost always showcase the design and don't include backend functionality. i.e. the web designer makes it look pretty but it's the the programmer who makes it work.

In this particular case you'd need a backed programming language, PHP for example, to query facebook / flicker etc. first, to determine the numbers to display. PHP would then generate the html with the appropriate numbers included.

AJMegaughin () - 10 years ago - Reply 0


Gotcha! I know PHP, not a super pro but I get along! =) This gives me a direction to go in!

Dave () - 10 years ago - Reply 0


The numbers are the ones that are "1000" in the HTML code. Enjoy!

maxsurguy () - 10 years ago - Reply 0


Excelleng work!

Travis Layne () - 11 years ago - Reply 0


great job, thank you

Ervin () - 11 years ago - Reply 0


great. thanks

peter () - 11 years ago - Reply 0