Twitter-Bootstrap 4.0 Star Rating System

[dday9]

I had a client that wanted me to building them a rating system and oddly enough I couldn't find a pre-made example, so I built one myself:

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-10 mx-auto">
      <!-- average rating and rating breakdown -->
      <div class="row card-deck">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Average Rating</h5>
            <p class="card-text"><strong>4.8</strong> / 5</p>
            <span class="border rounded p-1 bg-warning text-white"><i class="fas fa-star"></i></span>
            <span class="border rounded p-1 bg-warning text-white"><i class="fas fa-star"></i></span>
            <span class="border rounded p-1 bg-warning text-white"><i class="fas fa-star"></i></span>
            <span class="border rounded p-1 bg-warning text-white"><i class="fas fa-star"></i></span>
            <span class="border rounded p-1 bg-light text-dark"><i class="fas fa-star"></i></span>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Rating Breakdown</h5>
            <div class="d-flex ratings-breakdown">
              <small>5 <i class="fas fa-star pr-1"></i></small>
              <div class="flex-fill align-self-lg-center progress">
                <div id="ratings-breakdown-five-stars-progress" class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <small id="ratings-breakdown-five-stars-text" class="pl-1">- 10</small>
            </div>
            <div class="d-flex ratings-breakdown">
              <small>4 <i class="fas fa-star pr-1"></i></small>
              <div class="flex-fill align-self-lg-center progress">
                <div id="ratings-breakdown-five-stars-progress" class="progress-bar bg-primary" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <small id="ratings-breakdown-five-stars-text" class="pl-1">- 8</small>
            </div>
            <div class="d-flex ratings-breakdown">
              <small>3 <i class="fas fa-star pr-1"></i></small>
              <div class="flex-fill align-self-lg-center progress">
                <div id="ratings-breakdown-five-stars-progress" class="progress-bar bg-info" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <small id="ratings-breakdown-five-stars-text" class="pl-1">- 6</small>
            </div>
            <div class="d-flex ratings-breakdown">
              <small>2 <i class="fas fa-star pr-1"></i></small>
              <div class="flex-fill align-self-lg-center progress">
                <div id="ratings-breakdown-five-stars-progress" class="progress-bar bg-warning" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <small id="ratings-breakdown-five-stars-text" class="pl-1">- 4</small>
            </div>
            <div class="d-flex ratings-breakdown">
              <small>1 <i class="fas fa-star pr-1"></i></small>
              <div class="flex-fill align-self-lg-center progress">
                <div id="ratings-breakdown-five-stars-progress" class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <small id="ratings-breakdown-five-stars-text" class="pl-1">- 2</small>
            </div>
          </div>
        </div>
      </div>

      <!-- individual ratings -->
      <div class="row">
        <div class="col-12 mt-3">
          <div class="card">
            <div class="card-header">
              Title of Rating
            </div>
            <div class="card-body">
              <blockquote class="blockquote mb-0">
                <p>Brief description of the rating.</p>
                <footer class="blockquote-footer p-0"><strong>John Smith</strong> rated 5 Stars</footer>
              </blockquote>
            </div>
          </div>
        </div>
        <div class="col-12 mt-3">
          <div class="card">
            <div class="card-header">
              Title of Rating
            </div>
            <div class="card-body">
              <blockquote class="blockquote mb-0">
                <p>Brief description of the rating.</p>
                <footer class="blockquote-footer p-0"><strong>John Smith</strong> rated 1 Stars</footer>
              </blockquote>
            </div>
          </div>
        </div>
        <div class="col-12 mt-3">
          <div class="card">
            <div class="card-header">
              Title of Rating
            </div>
            <div class="card-body">
              <blockquote class="blockquote mb-0">
                <p>Brief description of the rating.</p>
                <footer class="blockquote-footer p-0"><strong>John Smith</strong> rated 3 Stars</footer>
              </blockquote>
            </div>
          </div>
        </div>
      </div>

      <!-- pagination -->
      <nav class="mt-2" aria-label="Page navigation example">
        <ul class="pagination">
          <li class="page-item">
            <a class="page-link" href="#" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
              <span class="sr-only">Previous</span>
            </a>
          </li>
          <li class="page-item"><a class="page-link" href="#">1</a></li>
          <li class="page-item"><a class="page-link" href="#">2</a></li>
          <li class="page-item"><a class="page-link" href="#">3</a></li>
          <li class="page-item">
            <a class="page-link" href="#" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
              <span class="sr-only">Next</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div>

Fiddle: Live Demo

Throw some JavaScript/JQuery or PHP and you've got yourself a fully functioning system.

[techgnome]

Really??? Semantic-UJI has one -- https://react.semantic-ui.com/modules/rating/ that's the react version.... here's the main version ... https://semantic-ui.com/modules/rating.html



Aaah.... I see now... yours breaks it down... or has the ability to do so... nice.

-tg

[DEXWERX]

Its nice to see others using semantic/fomantic.

It's also odd you couldn't find one? Lots of hits on google. Maybe none satisfactory?

First link for "bootstrap star rating" --> https://github.com/kartik-v/bootstrap-star-rating

[dday9]

I could find tons of examples that allowed users to select a star in the group of 5. But what I was looking for was the average rating and rating breakdown mostly, and I couldn't really find that anywhere (at least none that I liked).

[techgnome]

I find that building things like that are like working with Legos ... you don't find something ready-made, but you find the pieces and put them together... which is some of the fun, otherwise it would get boring after a while.

-tg

[DEXWERX]

I could find tons of examples that allowed users to select a star in the group of 5. But what I was looking for was the average rating and rating breakdown mostly, and I couldn't really find that anywhere (at least none that I liked).

Ah makes sense. That's typically a high level a design decision, so how to display that can be wildly inconsistent between sites.
looks good.

[cuatudong8k]

I am also wondering about this, really do not understand the 4 * evaluation and how to evaluate it? I have searched and consulted on many different forums, but I have not found a solution yet, it is frustrating.

[dday9]

@cuatudong8k - do you have a specific question about my implementation that I can help with?