이 모든 기능은 부트스트랩에서 기본적으로 제공하는 것을 기반으로 합니다..

html : 

<div class="stepwizard">

    <div class="stepwizard-row">

        <div class="stepwizard-step">

            <button type="button" class="btn btn-default btn-circle">1</button>

            <p>장바구니</p>

        </div>

        <div class="stepwizard-step">

            <button type="button" class="btn btn-primary btn-circle">2</button>

            <p>주문</p>

        </div>

        <div class="stepwizard-step">

            <button type="button" class="btn btn-default btn-circle" disabled="disabled">3</button>

            <p>결제</p>

        </div> 

    </div>

</div>

css:

.stepwizard-step p {

    margin-top: 10px;    

}

.stepwizard-row {

    display: table-row;

}

.stepwizard {

    display: table;     

    width: 100%;

    position: relative;

}

.stepwizard-step button[disabled] {

    opacity: 1 !important;

    filter: alpha(opacity=100) !important;

}

.stepwizard-row:before {

    top: 14px;

    bottom: 0;

    position: absolute;

    content: " ";

    width: 100%;

    height: 1px;

    background-color: #ccc;

    z-order: 0;

}

.stepwizard-step {    

    display: table-cell;

    text-align: center;

    position: relative;

}

.btn-circle {

  width: 30px;

  height: 30px;

  text-align: center;

  padding: 6px 0;

  font-size: 12px;

  line-height: 1.428571429;

  border-radius: 15px;

}