수평 단계

미리보기

소스

<div class="card overflow-auto">
    <div class="card-body">
        <h3 class="card-title">수평 단계</h3>
        <ul class="steps steps-green m-0 p-0 border-0">
            <li class="step-item">1</li>
            <li class="step-item active">2</li>
            <li class="step-item">3</li>
        </ul>
    </div>
    <div class="card-body">
        <ul class="steps steps-green steps-counter m-0 p-0 border-0">
            <li class="step-item"></li>
            <li class="step-item active"></li>
            <li class="step-item"></li>
        </ul>
    </div>
    <div class="card-body">
        <ul class="steps steps-green steps-counter m-0 p-0 border-0">
            <li class="step-item">장바구니</li>
            <li class="step-item active">결제 정보</li>
            <li class="step-item">확인</li>
        </ul>
    </div>
    <div class="card-body">
        <ol class="breadcrumb breadcrumb-arrows">
            <li class="breadcrumb-item"><a href="#">1단계</a></li>
            <li class="breadcrumb-item active"><a href="#">2단계</a></li>
            <li class="breadcrumb-item disabled"><a href="#">3단계</a></li>
            <li class="breadcrumb-item disabled"><a href="#">4단계</a></li>
        </ol>
    </div>
    <div class="card-body">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">1. 1단계</a></li>
            <li class="breadcrumb-item"><a href="#">2. 2단계</a></li>
            <li class="breadcrumb-item active"><a href="#">3. 3단계</a></li>
            <li class="breadcrumb-item disabled"><a href="#">4. 4단계</a></li>
            <li class="breadcrumb-item disabled"><a href="#">5. 5단계</a></li>
        </ol>
    </div>
    <div class="card-body">
        <ol class="breadcrumb breadcrumb-muted">
            <li class="breadcrumb-item"><a href="#">1. 1단계</a></li>
            <li class="breadcrumb-item"><a href="#">2. 2단계</a></li>
            <li class="breadcrumb-item active"><a href="#">3. 3단계</a></li>
            <li class="breadcrumb-item disabled"><a href="#">4. 4단계</a></li>
            <li class="breadcrumb-item disabled"><a href="#">5. 5단계</a></li>
        </ol>
    </div>
</div>