Add a card to your UI with Bootstrap 5 rating and review with user comment snippets. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
1<div class="container-fluid px-1 py-5 mx-auto">
2 <div class="row justify-content-center">
3 <div class="col-xl-7 col-lg-8 col-md-10 col-12 text-center mb-5">
4 <div class="card">
5 <div class="row justify-content-left d-flex">
6 <div class="col-md-4 d-flex flex-column">
7 <div class="rating-box">
8 <h1 class="pt-4">4.0</h1>
9 <p class="">out of 5</p>
10 </div>
11 <div> <span class="fa fa-star star-active mx-1"></span> <span class="fa fa-star star-active mx-1"></span> <span class="fa fa-star star-active mx-1"></span> <span class="fa fa-star star-active mx-1"></span> <span class="fa fa-star star-inactive mx-1"></span> </div>
12 </div>
13 <div class="col-md-8">
14 <div class="rating-bar0 justify-content-center">
15 <table class="text-start mx-auto">
16 <tr>
17 <td class="rating-label">Excellent</td>
18 <td class="rating-bar">
19 <div class="bar-container">
20 <div class="bar-5"></div>
21 </div>
22 </td>
23 <td class="text-end">123</td>
24 </tr>
25 <tr>
26 <td class="rating-label">Good</td>
27 <td class="rating-bar">
28 <div class="bar-container">
29 <div class="bar-4"></div>
30 </div>
31 </td>
32 <td class="text-end">23</td>
33 </tr>
34 <tr>
35 <td class="rating-label">Average</td>
36 <td class="rating-bar">
37 <div class="bar-container">
38 <div class="bar-3"></div>
39 </div>
40 </td>
41 <td class="text-end">10</td>
42 </tr>
43 <tr>
44 <td class="rating-label">Poor</td>
45 <td class="rating-bar">
46 <div class="bar-container">
47 <div class="bar-2"></div>
48 </div>
49 </td>
50 <td class="text-end">3</td>
51 </tr>
52 <tr>
53 <td class="rating-label">Terrible</td>
54 <td class="rating-bar">
55 <div class="bar-container">
56 <div class="bar-1"></div>
57 </div>
58 </td>
59 <td class="text-end">0</td>
60 </tr>
61 </table>
62 </div>
63 </div>
64 </div>
65 </div>
66 <div class="card">
67 <div class="row d-flex">
68 <div class=""> <img class="profile-pic" src="https://i.imgur.com/V3ICjlm.jpg"> </div>
69 <div class="d-flex flex-column">
70 <h3 class="mt-2 mb-0">Mukesh Kumar</h3>
71 <div>
72 <p class="text-start"><span class="text-muted">4.0</span> <span class="fa fa-star star-active ms-3"></span> <span class="fa fa-star star-active"></span> <span class="fa fa-star star-active"></span> <span class="fa fa-star star-active"></span> <span class="fa fa-star star-inactive"></span></p>
73 </div>
74 </div>
75 <div class="ms-auto">
76 <p class="text-muted pt-5 pt-sm-3">10 Sept</p>
77 </div>
78 </div>
79 <div class="row text-start">
80 <h4 class="blue-text mt-3">"An awesome activity to experience"</h4>
81 <p class="content">If you really enjoy spending your vacation 'on water' or would like to try something new and exciting for the first time.</p>
82 </div>
83 <div class="row text-start"> <img class="pic" src="https://i.imgur.com/kjcZcfv.jpg"> <img class="pic" src="https://i.imgur.com/SjBwAgs.jpg"> <img class="pic" src="https://i.imgur.com/IgHpsBh.jpg"> </div>
84 <div class="row text-start mt-4">
85 <div class="like me-3 vote"> <img src="https://i.imgur.com/mHSQOaX.png"><span class="blue-text ps-2">20</span> </div>
86 <div class="unlike vote"> <img src="https://i.imgur.com/bFBO3J7.png"><span class="text-muted ps-2">4</span> </div>
87 </div>
88 </div>
89 </div>
90 </div>
91</div>
Bootstrap carousel with cards in 3 columns
Bootstrap carousel with cards in 3 columns: a hand-crafted, open-source Bootstrap 5 card. HTML included, ready to copy.
Bootstrap 5 ecommerce product cards details template
Add a card to your UI with Bootstrap 5 ecommerce product cards details template. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
Bootstrap snippet Panels with nav tabs using HTML & CSS
Bootstrap snippet Panels with nav tabs using HTML & CSS — a free Bootstrap 5 card snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
13
Views
6
Likes
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.