I have a limited data list (only displaying the top 5). I'd look like this :

And the problem is how to make the icon in different color using Bootstrap class. I want the icon in that list have 5 color like bg-light-primary for the first, bg-light-danger for the second, bg-light-success for the third, etc. The way I display the data is using Laravel @foreach. Like this:

@foreach ($diklats->where('status', 'Active')->take(5) as $diklat_list)
    <div class="transaction-item">
        <a href="javascript:void(0)" class="text-dark">
            <div class="media">
                <div class="avatar bg-light-primary rounded">
                    <div class="avatar-content">
                        <i data-feather="book" class="avatar-icon font-medium-3"></i>
                    </div>
                </div>
                <div class="media-body ml-1">
                    <h6 class="transaction-title">{{$diklat_list->name}}</h6>
                    <small>{{$diklat_list->userDiklat->where('is_approve',1)->count()}} </small>
                </div>
            </div>
        </a>
    <div class="font-weight-bolder text-danger"></div>
</div>
@endforeach

In this is the controller:

<?php

namespace App\Http\Controllers\Admin;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\{Diklat, User, UserDiklat, Regency};
use Illuminate\Support\Facades\DB;

class DashboardController extends Controller
{
    public function index()
    {
        $diklat = Diklat::where('status', 'Active')->count();
        $participant = User::where('is_participant', 1)->count();
        $regency = Regency::all()->count();
        $diklats = Diklat::with('userDiklat')->get();

        return view('admin.index', compact('diklats', 'diklat', 'participant', 'regency'));
    }
}

I have search for this case but still didn't get it and I'm in the learning stage. Would you help me, please? Thank you in advance.