<div class="row">
    <div class="col-xl-3 col-md-4">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <div class="bg-primary avatar rounded-3"></div>
                    </div>
                    <div class="flex-grow-1 ms-3">
                        <p class="mb-1 font-size-16 fw-medium text-primary">Primary</p>
                        <p class="mb-0 text-primary">Hex : #038edc</p>
                    </div>
                </div>
            </div>
        </div>
        </div><!-- end col -->
        <div class="col-xl-3 col-md-4">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <div class="bg-success avatar rounded-3"></div>
                    </div>
                    <div class="flex-grow-1 ms-3">
                        <p class="mb-1 font-size-16 fw-medium text-success">Success</p>
                        <p class="mb-0 text-success">Hex : #038edc</p>
                    </div>
                </div>
            </div>
        </div>
        </div><!-- end col -->
        <div class="col-xl-3 col-md-4">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <div class="bg-info avatar rounded-3"></div>
                    </div>
                    <div class="flex-grow-1 ms-3">
                        <p class="mb-1 font-size-16 fw-medium text-info">Info</p>
                        <p class="mb-0 text-info">Hex : #038edc</p>
                    </div>
                </div>
            </div>
        </div>
        </div><!-- end col -->
        <div class="col-xl-3 col-md-4">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <div class="bg-dark avatar rounded-3"></div>
                    </div>
                    <div class="flex-grow-1 ms-3">
                        <p class="mb-1 font-size-16 fw-medium text-dark">Dark</p>
                        <p class="mb-0 text-dark">Hex : #038edc</p>
                    </div>
                </div>
            </div>
        </div>
        </div><!-- end col --> 
        <div class="col-xl-3 col-md-4">
        <div class="card mb-xl-0">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <div class="bg-secondary avatar rounded-3"></div>
                    </div>
                    <div class="flex-grow-1 ms-3">
                        <p class="mb-1 font-size-16 fw-medium text-secondary">Secondary</p>
                        <p class="mb-0 text-secondary">Hex : #038edc</p>
                    </div>
                </div>
            </div>
        </div>
        </div><!-- end col -->  
        <div class="col-xl-3 col-md-4">
        <div class="card mb-xl-0">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <div class="bg-danger avatar rounded-3"></div>
                    </div>
                    <div class="flex-grow-1 ms-3">
                        <p class="mb-1 font-size-16 fw-medium text-danger">Danger</p>
                        <p class="mb-0 text-danger">Hex : #038edc</p>
                    </div>
                </div>
            </div>
        </div>
        </div><!-- end col -->
        <div class="col-xl-3 col-md-4">
        <div class="card mb-md-0">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <div class="bg-warning avatar rounded-3"></div>
                    </div>
                    <div class="flex-grow-1 ms-3">
                        <p class="mb-1 font-size-16 fw-medium text-warning">Warning</p>
                        <p class="mb-0 text-warning">Hex : #038edc</p>
                    </div>
                </div>
            </div>
        </div>
        </div><!-- end col -->
        <div class="col-xl-3 col-md-4">
        <div class="card mb-0">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <div class="bg-purple avatar rounded-3"></div>
                    </div>
                    <div class="flex-grow-1 ms-3">
                        <p class="mb-1 font-size-16 fw-medium text-purple">Purple</p>
                        <p class="mb-0 text-purple">Hex : #038edc</p>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- end col -->
</div><!-- end row -->