<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">
        <p>
            아웃라인 버튼을 사용하려면 <code>.btn-outline-*</code> 클래스를 사용하세요.
        </p>
        <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-outline-primary w-100">
                    프라이머리
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-outline-secondary w-100">
                    세컨더리
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-outline-success w-100">
                    성공
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-outline-warning w-100">
                    경고
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-outline-danger w-100">
                    위험
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-outline-info w-100">
                    정보
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-outline-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-outline-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-outline-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-outline-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-outline-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-outline-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-outline-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-outline-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-outline-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-outline-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-outline-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-outline-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-outline-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-outline-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-outline-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-outline-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-outline-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-outline-light disabled w-100">
                    라이트
                </a>
            </div>
        </div>
    </div>
</div>