Bootstrap UI Kit

Static Star Rating

<div class="uk-rating">
    <i class="fas fa-star"></i><i class="fas fa-star"></i>
    <i class="fas fa-star"></i><i class="fas fa-star"></i>
    <i class="fas fa-star"></i>
</div>

<style>
    .uk-rating { color: #f59e0b; font-size: 1.1rem; letter-spacing: 2px; }
    .uk-rating .far { color: #cbd5e1; }
</style>

Half-Star Rating

3.5

<div class="uk-rating">
    <i class="fas fa-star"></i>
    <i class="fas fa-star"></i>
    <i class="fas fa-star"></i>
    <i class="fas fa-star-half-alt"></i>
    <i class="far fa-star"></i>
</div>
<span class="uk-rating-value">3.5</span>

<style>
    .uk-rating-value {
        font-weight: 700; color: #0b1b2f;
        margin-left: 0.5rem; font-size: 0.9rem;
    }
</style>

Interactive Rating

<div class="uk-rating uk-rating-input">
    <i class="far fa-star" data-v="1"></i>
    <i class="far fa-star" data-v="2"></i>
    <i class="far fa-star" data-v="3"></i>
    <i class="far fa-star" data-v="4"></i>
    <i class="far fa-star" data-v="5"></i>
</div>

<script>
    document.querySelectorAll('.uk-rating-input').forEach(box => {
        const stars = box.querySelectorAll('i');
        stars.forEach(star => {
            star.addEventListener('mouseenter', () => {
                const v = +star.dataset.v;
                stars.forEach((s, i) => {
                    s.className = i < v ? 'fas fa-star' : 'far fa-star';
                });
            });
            star.addEventListener('click', () => {
                box.dataset.value = star.dataset.v;
            });
        });
        box.addEventListener('mouseleave', () => {
            const v = +box.dataset.value || 0;
            stars.forEach((s, i) => {
                s.className = i < v ? 'fas fa-star' : 'far fa-star';
            });
        });
    });
</script>

Rating with Review Count

4.0 (128 reviews)

<div class="d-flex align-items-center gap-2">
    <div class="uk-rating">
        <i class="fas fa-star"></i><i class="fas fa-star"></i>
        <i class="fas fa-star"></i><i class="fas fa-star"></i>
        <i class="far fa-star"></i>
    </div>
    <span class="fw-bold">4.0</span>
    <span class="text-muted">(128 reviews)</span>
</div>

Rating Distribution

5

78%

4

15%

3

4%

2

2%

1

1%

<div class="d-flex align-items-center gap-2 mb-2">
    <span>5 ★</span>
    <div class="progress flex-grow-1" style="height:8px;">
        <div class="progress-bar" style="width:78%;background:#f59e0b;"></div>
    </div>
    <span>78%</span>
</div>

Emoji Rating

<div class="uk-emoji-rating">
    <button class="uk-emoji" title="Terrible">😡</button>
    <button class="uk-emoji" title="Bad">🙁</button>
    <button class="uk-emoji" title="Okay">😐</button>
    <button class="uk-emoji active" title="Good">🙂</button>
    <button class="uk-emoji" title="Excellent">😍</button>
</div>

<style>
    .uk-emoji-rating {
        display: inline-flex;
        gap: 0.35rem;
        padding: 0.35rem;
        background: #f1f5f9;
        border-radius: 999px;
    }
    .uk-emoji {
        background: transparent;
        border: 0;
        width: 40px; height: 40px;
        border-radius: 50%;
        font-size: 1.25rem;
        cursor: pointer;
        transition: all 0.15s;
    }
    .uk-emoji:hover { background: #fff; transform: scale(1.05); }
    .uk-emoji.active {
        background: #1e3a8a;
        transform: scale(1.1);
    }
</style>

Ratings