Rating

All code are beautifully written. You can customize easily. Just look the u-raitng.html file go to form code with change and use.you would like to edit a specific section of the site, simply find the appropriate label in the amex/ui-rating.html and change what you need.

amex bootstrap 4 admin dashboard provide this beautifull with standard rating form you can see this documentation

<!doctype html>
    <!--  Rating CSS    -->
    <link href="css/vendor/bars-pill.min.css" rel="stylesheet"/>
    <link href="css/vendor/bars-reversed.min.css" rel="stylesheet"/>
    <link href="css/vendor/jquery.rateyo.css" rel="stylesheet"/>
<body>
    <div class="page-container">
      <div id="sidebar" class="sidebar-nav">
            <ul class="vertical-nav-menu metismenu in">
               < --------sidebar--------->
            </ul>
        </div> <  --/.sidebar----  >
        <div class="main-content">
            <div class="top-header">
                 <-----top header------>
            </div>  
            <div class="body-content">
                <div class="uibar-rating">
                   <select id="example">
                        <---option---> 
                   </select> 
                 </div>
                  <div class="barpill-rating">
                   <select id="example2">
                        <---option---> 
                   </select> 
                 </div>
                   </div>
                   <div id="rateYo">
                    </div> 
            </div> 
        </div>
        <footer">
            <div class="footer-area">
                <-----footer content------>
            </div> 
        </footer>  
    </div>
</body>
<!--   Core JS Files   -->
<script src="js/vendor/jquery.barrating.min.js"></script>
<script src="js/vendor/jquery.rateyo.js"></script>

</html>

<script>
    $(function() {
        $('#example, #exampletwo, #examplethree').barrating({
            theme: 'bars-reversed',
            hoverState:false,
        });
    });

    $(function() {
        $('#example2').barrating({
            theme: 'bars-pill',
            hoverState:false
        });
    });
    //Make sure that the dom is ready
    $(function () {

        $("#rateYo").rateYo({
            rating: 3.6
        });

    });
</script>