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>