필 버튼

필 버튼을 사용하려면 .btn-pill 클래스를 사용하세요.

미리보기

소스

<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-pill</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-primary btn-pill w-100">
                    프라이머리
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-secondary btn-pill w-100">
                    세컨더리
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-success btn-pill w-100">
                    성공
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-warning btn-pill w-100">
                    경고
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-danger btn-pill w-100">
                    위험
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-info btn-pill w-100">
                    정보
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-dark btn-pill 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 btn-pill w-100">
                    라이트
                </a>
            </div>
        </div>
    </div>
</div>