Bootstrap 5 rating and review with user comment snippets

Cards Bootstrap 5Free+ CSS

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.

18.1k views374 downloads6 years ago

gosnippets.com/preview/bootstrap-5-rating-and-review-with-user-comment-snippets

Source Code

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>

More Cards snippets

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.

CardsView →

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.

CardsView →

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.

CardsView →

Comments(0)

No comments yet — be the first to start the discussion.

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>