Trying to achieve a specific layout using Bootstrap 4:
https://i.sstatic.net/Ym6Ov.jpg
Disregarding "See All" and "4,327 Ratings"
Progress so far has led to:
https://i.sstatic.net/hPSRn.png
The numerical ratings can be replaced with font icons.
Provided code snippet:
<h4>Ratings and Reviews</h4>
<div class="d-flex">
<div class="text-center">
<span class="display-4 font-weight-bolder">3.1</span><br>
<span class="text-black-50">out of 5</span>
</div>
// Additional rows ...
</div>
In need of assistance to: - Vertically align the progress bar with text/star. - Replace Row/Col structure with flexbox. - Utilize minimal CSS.