→ Mason Ashford
→ Interactive Star Rating

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.

This bootstrap css example is contributed by Mason Ashford, on 23-Nov-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example is Vote

Tags: Rating

Author Mason Ashford

5.2k

v.5.3

Fork Fullscreen

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<div class="col-md-6">
    <div class="rating-card p-4">
        <h5 class="mb-4">Interactive Star Rating</h5>
        <div class="star-rating animated-stars">
            <input type="radio" id="star5" name="rating" value="5">
            <label for="star5" class="bi bi-star-fill"></label>
            <input type="radio" id="star4" name="rating" value="4">
            <label for="star4" class="bi bi-star-fill"></label>
            <input type="radio" id="star3" name="rating" value="3">
            <label for="star3" class="bi bi-star-fill"></label>
            <input type="radio" id="star2" name="rating" value="2">
            <label for="star2" class="bi bi-star-fill"></label>
            <input type="radio" id="star1" name="rating" value="1">
            <label for="star1" class="bi bi-star-fill"></label>
        </div>
        <p class="text-muted mt-2">Click to rate</p>
    </div>
</div>

<style>
    .star-rating {
        direction: rtl;
        display: inline-block;
        cursor: pointer;
    }

.star-rating input {
        display: none;
    }

.star-rating label {
        color: #ddd;
        font-size: 24px;
        padding: 0 2px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

.star-rating label:hover,
    .star-rating label:hover~label,
    .star-rating input:checked~label {
        color: #ffc107;
    }
</style>

<script>
    document.querySelectorAll('.star-rating:not(.readonly) label').forEach(star => {
        star.addEventListener('click', function() {
            this.style.transform = 'scale(1.2)';
            setTimeout(() => {
                this.style.transform = 'scale(1)';
            }, 200);
        });
    });
</script>

More Examples

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.3k

v.5.3
Star Rating Component

Author:
Alaric Sloane

7 months ago

2.1k

v.5.3
Beautiful Rating Component
Take user ratings with this form card

Author:
Mateo Rojas

4 months ago

778

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

Author:
Tane Mahuta

9 months ago

1.2k

v.5.3
Product card component using Bootstrap 5

Author:
Mateo Rojas

4 months ago

872

v.5.3
Search Bar Examples with Boostrap 5

Author:
Riz Mohammad

9 months ago

2.7k

v.5.3
Animated Radio Buttons

Author:
Arturo

4 months ago

492

v.5.3
Accordion example with Bootstrap 5.3
accordion with animation

Author:
Ankit khedkar

9 months ago

5.1k

v.5.3
Outlined Buttons with Animated Hover

Author:
Prajwal Hallale

1 year ago

761

v.5.3
Professional Staff Profile Cards with Social Integration

Author:
Isaac Winslow

5 months ago

2.6k

v.5.3
Contact us form with map

Author:
karia

1 year ago

9k

v.5.3
Custom buttons

Author:
Anonymous

1 year ago

755

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent

BootstrapExamples From the makers of tailwindflex.com

BootstrapExamples is a free library offering a diverse range of Bootstrap CSS components. Developed by the community, it's open for anyone to use.

Contacts

Email:

[email protected]

Links

Search

Resources

Free Tailwind CSS Components Free CSS Components

© 2025 BootstrapExamples. All Rights Reserved.

v1.3