추가 색상

미리보기

소스

<div class="card overflow-auto">
    <div class="card-status-top bg-dark-overlay"></div>
    <div class="card-header">
        <h3 class="card-title">추가 색상</h3>
    </div>
    <div class="card-body">
        <div class="row g-2 align-items-center">
            <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                <a href="#" class="btn btn-blue w-100">
                    파랑
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                <a href="#" class="btn btn-azure w-100">
                    하늘
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                <a href="#" class="btn btn-indigo w-100">
                    남색
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                <a href="#" class="btn btn-purple w-100">
                    보라
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                <a href="#" class="btn btn-pink w-100">
                    분홍
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                <a href="#" class="btn btn-red w-100">
                    빨강
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                <a href="#" class="btn btn-orange w-100">
                    주황
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                <a href="#" class="btn btn-yellow w-100">
                    노랑
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                <a href="#" class="btn btn-lime w-100">
                    라임
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                <a href="#" class="btn btn-green w-100">
                    초록
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                <a href="#" class="btn btn-teal w-100">
                    청록
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                <a href="#" class="btn btn-cyan w-100">
                    청자
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                <a href="#" class="btn btn-dark w-100">
                    다크
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                <a href="#" class="btn btn-muted w-100">
                    뮤트
                </a>
            </div>
        </div>
    </div>
</div>