Utilities Bootstrap 5Free+ CSS
Free Bootstrap 5 utility snippet — Bootstrap 5 Review and Rating box Snippets. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
4.6k views25 downloads
gosnippets.com/preview/bootstrap-5-review-and-rating-box-snippets
Source Code
1<div class="container-fluid px-0 py-5 mx-auto">
2 <div class="row justify-content-center mx-0 mx-md-auto">
3 <div class="col-lg-10 col-md-11 px-1 px-sm-2">
4 <div class="card border-0 px-3">
5 <!-- top row -->
6 <div class="d-flex row py-5 px-5 bg-light">
7 <div class="green-tab p-2 px-3 mx-2">
8 <p class="sm-text mb-0">OVERALL RATING</p>
9 <h4>4.8</h4>
10 </div>
11 <div class="white-tab p-2 mx-2 text-muted">
12 <p class="sm-text mb-0">ALL REVIEWS</p>
13 <h4>124</h4>
14 </div>
15 <div class="white-tab p-2 mx-2">
16 <p class="sm-text mb-0 text-muted">POSITIVE REVIEWS</p>
17 <h4 class="green-text">93%</h4>
18 </div>
19 <div class="ms-md-auto p-2 mx-md-2 pt-4 pt-md-3"> <button class="btn btn-red px-4">WRITE A REVIEW</button> </div>
20 </div> <!-- middle row -->
21 <div class="row bg-light">
22 <div class="col-md-2 col-4 text-center block py-5">
23 <div class="round-icon"> <img src="https://i.imgur.com/8lJt6UN.png" width="50px" height="50px"> </div>
24 <p class="sm-text-1 grey-text mb-0">100</p>
25 <div class="fa fa-circle green-dot"></div>
26 <div class="fa fa-circle green-dot"></div>
27 <div class="fa fa-circle green-dot"></div>
28 <div class="fa fa-circle green-dot"></div>
29 <div class="fa fa-circle green-dot"></div>
30 </div>
31 <div class="col-md-2 col-4 text-center block py-5">
32 <div class="round-icon"> <img src="https://i.imgur.com/Grjnbah.png" width="50px" height="50px"> </div>
33 <p class="sm-text-1 grey-text mb-0">100</p>
34 <div class="fa fa-circle red-dot"></div>
35 <div class="fa fa-circle red-dot"></div>
36 <div class="fa fa-circle"></div>
37 <div class="fa fa-circle"></div>
38 <div class="fa fa-circle"></div>
39 </div>
40 <div class="col-md-2 col-4 text-center block py-5">
41 <div class="round-icon"> <img src="https://i.imgur.com/q2v8mqu.png" width="50px" height="50px"> </div>
42 <p class="sm-text-1 grey-text mb-0">100</p>
43 <div class="fa fa-circle yellow-dot"></div>
44 <div class="fa fa-circle yellow-dot"></div>
45 <div class="fa fa-circle yellow-dot"></div>
46 <div class="fa fa-circle"></div>
47 <div class="fa fa-circle"></div>
48 </div>
49 <div class="col-md-2 col-4 text-center block py-5">
50 <div class="round-icon"> <img src="https://i.imgur.com/EkmVVM1.png" width="50px" height="50px"> </div>
51 <p class="sm-text-1 grey-text mb-0">100</p>
52 <div class="fa fa-circle"></div>
53 <div class="fa fa-circle"></div>
54 <div class="fa fa-circle"></div>
55 <div class="fa fa-circle"></div>
56 <div class="fa fa-circle"></div>
57 </div>
58 <div class="col-md-2 col-4 text-center block py-5">
59 <div class="round-icon"> <img src="https://i.imgur.com/ZbZzavI.png" width="50px" height="50px"> </div>
60 <p class="sm-text-1 grey-text mb-0">100</p>
61 <div class="fa fa-circle"></div>
62 <div class="fa fa-circle"></div>
63 <div class="fa fa-circle"></div>
64 <div class="fa fa-circle"></div>
65 <div class="fa fa-circle"></div>
66 </div>
67 <div class="col-md-2 col-4 text-center block py-5">
68 <div class="round-icon"> <img src="https://i.imgur.com/S6SGKFQ.png" width="50px" height="50px"> </div>
69 <p class="sm-text-1 grey-text mb-0">100</p>
70 <div class="fa fa-circle"></div>
71 <div class="fa fa-circle"></div>
72 <div class="fa fa-circle"></div>
73 <div class="fa fa-circle"></div>
74 <div class="fa fa-circle"></div>
75 </div>
76 </div> <!-- Review by user -->
77 <div class="review p-5">
78 <div class="row d-flex">
79 <div class="profile-pic"><img src="https://i.imgur.com/Mcd6HIg.jpg" width="60px" height="60px"></div>
80 <div class="d-flex flex-column ps-3">
81 <h4>Eshu</h4>
82 <p class="grey-text">30 min ago</p>
83 </div>
84 </div>
85 <div class="row pb-3">
86 <div class="fa fa-circle green-dot my-auto rating-dot"></div>
87 <div class="fa fa-circle green-dot my-auto rating-dot"></div>
88 <div class="fa fa-circle green-dot my-auto rating-dot"></div>
89 <div class="fa fa-circle green-dot my-auto rating-dot"></div>
90 <div class="fa fa-circle green-dot my-auto rating-dot"></div>
91 <div class="green-text">
92 <h5 class="mb-0 ps-3">Excellent</h5>
93 </div>
94 </div>
95 <div class="row pb-3">
96 <p>This dive center is incredibly well organized and is at the top of its game.</p>
97 </div>
98 <div class="row ms-1">
99 <div class="row bg-light via">
100 <div class="px-2"><img src="https://i.imgur.com/8lJt6UN.png" width="18px" height="18px"></div>
101 <p class="grey-text mb-0 px-3">via Google</p>
102 </div>
103 </div>
104 </div>
105 </div>
106 </div>
107 </div>
108</div>More Utilities snippets
Auto move mouse cursor snippet
Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.
UtilitiesView →
Bootstrap 5 Ecommerce Product Detail Page Design snippet
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
UtilitiesView →
Bootstrap 5 Ecommerce single product page design template
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
UtilitiesView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.