Bootstrap html snippet. Rating Voting

HTML code

Clean, semantic HTML that powers this Bootstrap 3.1.1 snippet. Copy and paste it into your page (with Bootstrap loaded) to reproduce the exact layout shown in the preview.

<hr>
<div class="container bootstrap snippets bootdey">
  <div class="row">
    <div class="col-md-6">
      <div class="row">
        <div class="col-md-12 text-center">
          <img src="https://bootdey.com/img/Content/avatar/avatar6.png" class="img-polaroid profile-img img-thumbnail " />
        </div>

        <div class="col-md-12  text-center">
          <div class="row">
            <div class="col-md-12">
              <div class="alert alert-success pull-right hide">
                <button type="button" class="close" data-dismiss="alert">×</button>
                You gave a rating of <span id="count">0</span> star(s)
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12 text-center">
              <h2 class="text-primary"><span class="glyphicon glyphicon-user"></span>John Doe<p class="lead">Please click the stars to vote</p></h2>
            </div>
          </div>
          <div class="row lead">
            <div class="col-md-12  text-center">
              <div id="stars" class="starrr text-warning"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS code

Scoped CSS that styles the component. Paste it after Bootstrap 3.1.1 to keep the design, spacing, and responsiveness consistent.

.profile-img{box-shadow: 0 5px 15px rgba(0,0,0,.5)}

Javascript/Jquery code

Lightweight JS to power any interactions this snippet needs. Drop it under your scripts (after Bootstrap 3.1.1) to mirror the live demo.

                        
$(".alert").addClass("in").fadeOut(3500);
// starrr plugin (https://github.com/dobtco/starrr)
var __slice = [].slice;

(function($, window) {
  var Starrr;

  Starrr = (function() {
    Starrr.prototype.defaults = {
      rating: void 0,
      numStars: 9,
      change: function(e, value) {}
    };

    function Starrr($el, options) {
      var i, _, _ref,
        _this = this;

      this.options = $.extend({}, this.defaults, options);
      this.$el = $el;
      _ref = this.defaults;
      for (i in _ref) {
        _ = _ref[i];
        if (this.$el.data(i) != null) {
          this.options[i] = this.$el.data(i);
        }
      }
      this.createStars();
      this.syncRating();
      this.$el.on('mouseover.starrr', 'span', function(e) {
        return _this.syncRating(_this.$el.find('span').index(e.currentTarget) + 1);
      });
      this.$el.on('mouseout.starrr', function() {
        return _this.syncRating();
      });
      this.$el.on('click.starrr', 'span', function(e) {
        return _this.setRating(_this.$el.find('span').index(e.currentTarget) + 1);
      });
      this.$el.on('starrr:change', this.options.change);
    }

    Starrr.prototype.createStars = function() {
      var _i, _ref, _results;

      _results = [];
      for (_i = 1, _ref = this.options.numStars; 1 <= _ref ? _i <= _ref : _i >= _ref; 1 <= _ref ? _i++ : _i--) {
        _results.push(this.$el.append("<span class='glyphicon .glyphicon-star-empty'></span>"));
      }
      return _results;
    };

    Starrr.prototype.setRating = function(rating) {
      if (this.options.rating === rating) {
        rating = void 0;
      }
      this.options.rating = rating;
      this.syncRating();
      return this.$el.trigger('starrr:change', rating);
    };

    Starrr.prototype.syncRating = function(rating) {
      var i, _i, _j, _ref;

      rating || (rating = this.options.rating);
      if (rating) {
        for (i = _i = 0, _ref = rating - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; i = 0 <= _ref ? ++_i : --_i) {
          this.$el.find('span').eq(i).removeClass('glyphicon-star-empty').addClass('glyphicon-star');
        }
      }
      if (rating && rating < 5) {
        for (i = _j = rating; rating <= 4 ? _j <= 4 : _j >= 4; i = rating <= 4 ? ++_j : --_j) {
          this.$el.find('span').eq(i).removeClass('glyphicon-star').addClass('glyphicon-star-empty');
        }
      }
      if (!rating) {
        return this.$el.find('span').removeClass('glyphicon-star').addClass('glyphicon-star-empty');
      }
    };

    return Starrr;

  })();
  return $.fn.extend({
    starrr: function() {
      var args, option;

      option = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
      return this.each(function() {
        var data;

        data = $(this).data('star-rating');
        if (!data) {
          $(this).data('star-rating', (data = new Starrr($(this), option)));
        }
        if (typeof option === 'string') {
          return data[option].apply(data, args);
        }
      });
    }
  });
})(window.jQuery, window);

$(function() {
  return $(".starrr").starrr();
});

$( document ).ready(function() {
      
  $('#stars').on('starrr:change', function(e, value){
      $('#count').html(value);
    $('.alert').removeClass('hide').show().delay(1000).addClass("in").fadeOut(3500);
  });
  
});