dcsimg
Results 1 to 6 of 6

Thread: Twitter-Bootstrap 4.0 Star Rating System

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    9,489

    Twitter-Bootstrap 4.0 Star Rating System

    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:
    HTML Code:
    <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.

  2. #2
    PowerPoster techgnome's Avatar
    Join Date
    May 2002
    Posts
    31,870

    Re: Twitter-Bootstrap 4.0 Star Rating System

    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
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  3. #3
    PowerPoster
    Join Date
    Jun 2015
    Posts
    2,098

    Re: Twitter-Bootstrap 4.0 Star Rating System

    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

  4. #4

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    9,489

    Re: Twitter-Bootstrap 4.0 Star Rating System

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

  5. #5
    PowerPoster techgnome's Avatar
    Join Date
    May 2002
    Posts
    31,870

    Re: Twitter-Bootstrap 4.0 Star Rating System

    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
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  6. #6
    PowerPoster
    Join Date
    Jun 2015
    Posts
    2,098

    Re: Twitter-Bootstrap 4.0 Star Rating System

    Quote Originally Posted by dday9 View Post
    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Featured


Click Here to Expand Forum to Full Width