→ 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

670

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

Rating section
Rating section fit form for taking user ratings and reviews

Author:
Tane Mahuta

9 months ago

1.1k

v.5.3
Star Rating Component

Author:
Alaric Sloane

6 months ago

1.8k

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

5 months ago

1.2k

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:
Mason Ashford

5 months ago

4.5k

v.5.3
Image slider
Image slider with auto-scrolling and with title and description

Author:
Anonymous

7 months ago

1.7k

v.5.3
Collapsible Sidebar

Author:
Alaric Sloane

5 months ago

12k

v.5.3
HTML and Bootstrap for Registration Form
HTML: Personal Information Section: Includes fields for full name, email, date of birth, bio, and profile image. Company Information Section: Includes fields for company name, company size (using a dropdown), and location. Submit Button: A button to submit the form. CSS: Background Gradient: Applied to the body. Card Styling: Styled with rounded corners and padding. Button Styling: Custom colors for the submit button. Validation Styling: Highlight invalid fields and display error messages. JavaScript: Validation Logic: Checks if required fields are filled and updates the feedback area with error or success messages. Dynamic Feedback: Updates the form with success or error messages based on validation.

Author:
zobaidul kaziex

7 months ago

4.1k

v.4.6
Basic landing page with bootstrap

Author:
Asmath

3 months ago

869

v.5.3
Clean Timeline Changelog
clean and beautiful changelog example

Author:
Alaric Sloane

6 months ago

1.9k

v.5.3
Product details page
Beautiful product detail page with

Author:
Andreas Müller

9 months ago

11k

v.5.3
Contact us section with Image

Author:
Anonymous

9 months ago

5k

v.4.6
bootstrap 5 search box with icon Example
Dark Theme Search Bar Light Theme Search Bar Simple Iconic Search Bar

Author:
Arturo

4 months ago

1.5k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent