→ Mateo Rojas
→ Beautiful Rating Component

Beautiful Rating Component

Take user ratings with this form card

This bootstrap css example is contributed by Mateo Rojas, on 21-Dec-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example is Vote

Tags: Rating

Author Mateo Rojas

2.3k

v.5.3

Fork Fullscreen

<div class="container">
        <div class="rating-container text-center">
            <div class="rating-emoji">
                😊
            </div>
            <h3 class="rating-title">How was your experience?</h3>
            <div class="star-rating">
                <input type="radio" id="star5" name="rating" value="5">
                <label for="star5" class="fas fa-star"></label>
                <input type="radio" id="star4" name="rating" value="4">
                <label for="star4" class="fas fa-star"></label>
                <input type="radio" id="star3" name="rating" value="3">
                <label for="star3" class="fas fa-star"></label>
                <input type="radio" id="star2" name="rating" value="2">
                <label for="star2" class="fas fa-star"></label>
                <input type="radio" id="star1" name="rating" value="1">
                <label for="star1" class="fas fa-star"></label>
            </div>
            <div class="rating-feedback">
                <textarea class="form-control" rows="3" placeholder="Tell us about your experience (optional)"></textarea>
            </div>
            <button class="submit-rating">Submit Rating</button>
        </div>
    </div>

More Examples

Interactive Star Rating
A dynamic star rating component where users can select their rating by clicking on stars. The rating can range from 1 to 5 stars, offering immediate visual feedback on hover and selection.

Author:
Mason Ashford

1 year ago

15.1k

v.5.3
Interactive Star Rating
A dynamic star rating component where users can select their rating by clicking on stars. The rating can range from 1 to 5 stars, offering immediate visual feedback on hover and selection.

Author:
Anonymous

1 year ago

1.8k

v.5.3
Star Rating Component

Author:
Alaric Sloane

1 year ago

5.8k

v.5.3
Rating section
Rating section fit form for taking user ratings and reviews

Author:
Tane Mahuta

1 year ago

4.2k

v.5.3
Emoji Rating
An alternative, fun way for users to rate with emojis ranging from angry to love. Hovering over the emojis gives a playful animation effect, encouraging user interaction.

Author:
Mason Ashford

1 year ago

2.9k

v.5.3
Elon Musk 4
Service Page 4

Author:
RAHAT RAHMAN OFICIAL

4 weeks ago

56

v.4.6
Simple Login form

Author:
Prajwal Hallale

2 years ago

9.3k

v.5.3
about section bootstrap
about section rro

Author:
RAHAT RAHMAN OFICIAL

4 weeks ago

84

v.4.6
siam footer
footer

Author:
MD Siam Miya

4 weeks ago

71

v.4.6
Elegant Bootstrap Footer
with social media icons, newsletter forms, and other important links

Author:
Mateo Rojas

1 year ago

4.9k

v.5.3
Hero slider

Author:
Juan Antonio González Hernández

3 months ago

1.2k

v.5.3
User Profile Card with Bootstrap
How to Use: Replace Image URL: Update the src attribute of the img tag to the actual URL of the user’s image. Update Text: Change the text inside the h5 and p elements to reflect the user’s actual name and biography

Author:
zobaidul kaziex

1 year ago

3.1k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent