표준 버튼

미리보기

소스

<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-12 col-xl-2 font-weight-semibold">일반</div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-primary w-100">
                    프라이머리
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-secondary w-100">
                    세컨더리
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-success w-100">
                    성공
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-warning w-100">
                    경고
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-danger w-100">
                    위험
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-info w-100">
                    정보
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-dark w-100">
                    다크
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl bg-dark py-3">
                <a href="#" class="btn btn-light w-100">
                    라이트
                </a>
            </div>
        </div>
        <div class="row g-2 align-items-center">
            <div class="col-12 col-xl-2 font-weight-semibold">활성 상태</div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-primary active w-100">
                    프라이머리
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-secondary active w-100">
                    세컨더리
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-success active w-100">
                    성공
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-warning active w-100">
                    경고
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-danger active w-100">
                    위험
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-info active w-100">
                    정보
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-dark active w-100">
                    다크
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl bg-dark py-3">
                <a href="#" class="btn btn-light active w-100">
                    라이트
                </a>
            </div>
        </div>
        <div class="row g-2 align-items-center">
            <div class="col-12 col-xl-2 font-weight-semibold">비활성화</div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-primary disabled w-100">
                    프라이머리
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-secondary disabled w-100">
                    세컨더리
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-success disabled w-100">
                    성공
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-warning disabled w-100">
                    경고
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-danger disabled w-100">
                    위험
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-info disabled w-100">
                    정보
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-dark disabled w-100">
                    다크
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl bg-dark py-3">
                <a href="#" class="btn btn-light disabled w-100">
                    라이트
                </a>
            </div>
        </div>
    </div>
</div>