Change bootstrap color class every loop in Laravel (blade)-CodePudding

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.

CodePudding user response：

Solved with this:

  @php ($icons = ["bg-light-primary","bg-light-success","bg-light-danger","bg-light-warning", "bg-light-info"])
  <div class="avatar {{$icons[$loop->index]}} rounded">
    <div class="avatar-content">
      <i data-feather="book" class="avatar-icon font-medium-3"></i>
    </div>
  </div>

CodePudding user response：

Create an array of your values and use a random value from that array to use that as a class.

<?php $class_array = array("bg-primary","bg-danger","bg-success","bg-warning"); ?>
<div class="avatar-content">
    <i data-feather="book" class="avatar-icon font-medium-3 {{$class_array[array_rand($class_array)]}}"></i>
</div>

It is recommended that you should not use random class as it might repeat or all of them could be same at a time.