گام به گام

<!-- Step Component Example -->
<div class="step mb-5">
    <div class="step-item">
        <a class="step-item-link" href="#!"> گام 1</a>
    </div>
    <div class="step-item">
        <a class="step-item-link" href="#!"> گام 2</a>
    </div>
    <div class="step-item active">
        <a class="step-item-link" href="#!"> گام 3</a>
    </div>
    <div class="step-item">
        <a class="step-item-link disabled" href="#!" tabindex="-1" aria-disabled="true"> گام 4</a>
    </div>
</div>

<!-- Large Step Component Example -->
<div class="step step-lg">
    <div class="step-item">
        <a class="step-item-link" href="#!"> گام 1</a>
    </div>
    <div class="step-item">
        <a class="step-item-link" href="#!"> گام 2</a>
    </div>
    <div class="step-item active">
        <a class="step-item-link" href="#!"> گام 3</a>
    </div>
    <div class="step-item">
        <a class="step-item-link disabled" href="#!" tabindex="-1" aria-disabled="true"> گام 4</a>
    </div>
</div>

<!-- Step Primary Example-->
<div class="step step-primary mb-5">
    <div class="step-item">
        <a class="step-item-link" href="#!"> گام 1</a>
    </div>
    <div class="step-item">
        <a class="step-item-link" href="#!"> گام 2</a>
    </div>
    <div class="step-item active">
        <a class="step-item-link" href="#!"> گام 3</a>
    </div>
    <div class="step-item">
        <a class="step-item-link disabled" href="#!" tabindex="-1" aria-disabled="true"> گام 4</a>
    </div>
</div>

<!-- Step Secondary Example-->
<div class="step step-secondary mb-5">
    <div class="step-item">
        <a class="step-item-link" href="#!"> گام 1</a>
    </div>
    <div class="step-item">
        <a class="step-item-link" href="#!"> گام 2</a>
    </div>
    <div class="step-item active">
        <a class="step-item-link" href="#!"> گام 3</a>
    </div>
    <div class="step-item">
        <a class="step-item-link disabled" href="#!" tabindex="-1" aria-disabled="true"> گام 4</a>
    </div>
</div>

<!-- Step Success Example-->
<div class="step step-success mb-5">
    <div class="step-item">
        <a class="step-item-link" href="#!"> گام 1</a>
    </div>
    <div class="step-item">
        <a class="step-item-link" href="#!"> گام 2</a>
    </div>
    <div class="step-item active">
        <a class="step-item-link" href="#!"> گام 3</a>
    </div>
    <div class="step-item">
        <a class="step-item-link disabled" href="#!" tabindex="-1" aria-disabled="true"> گام 4</a>
    </div>
</div>

<!-- Step Info Example-->
<div class="step step-info mb-5">
    <div class="step-item">
        <a class="step-item-link" href="#!"> گام 1</a>
    </div>
    <div class="step-item">
        <a class="step-item-link" href="#!"> گام 2</a>
    </div>
    <div class="step-item active">
        <a class="step-item-link" href="#!"> گام 3</a>
    </div>
    <div class="step-item">
        <a class="step-item-link disabled" href="#!" tabindex="-1" aria-disabled="true"> گام 4</a>
    </div>
</div>

<!-- Step Warning Example-->
<div class="step step-warning mb-5">
    <div class="step-item">
        <a class="step-item-link" href="#!"> گام 1</a>
    </div>
    <div class="step-item">
        <a class="step-item-link" href="#!"> گام 2</a>
    </div>
    <div class="step-item active">
        <a class="step-item-link" href="#!"> گام 3</a>
    </div>
    <div class="step-item">
        <a class="step-item-link disabled" href="#!" tabindex="-1" aria-disabled="true"> گام 4</a>
    </div>
</div>

<!-- Step Danger Example-->
<div class="step step-danger">
    <div class="step-item">
        <a class="step-item-link" href="#!"> گام 1</a>
    </div>
    <div class="step-item">
        <a class="step-item-link" href="#!"> گام 2</a>
    </div>
    <div class="step-item active">
        <a class="step-item-link" href="#!"> گام 3</a>
    </div>
    <div class="step-item">
        <a class="step-item-link disabled" href="#!" tabindex="-1" aria-disabled="true"> گام 4</a>
    </div>
</div>

<!-- Two Step Example-->
<div class="step">
    <div class="step-item">
        <a class="step-item-link" href="#!"> گام 1</a>
    </div>
    <div class="step-item active">
        <a class="step-item-link" href="#!"> گام 2</a>
    </div>
</div>

<!-- Three Step Example-->
<div class="step">
    <div class="step-item">
        <a class="step-item-link" href="#!"> گام 1</a>
    </div>
    <div class="step-item active">
        <a class="step-item-link" href="#!"> گام 2</a>
    </div>
    <div class="step-item">
        <a class="step-item-link disabled" href="#!" tabindex="-1" aria-disabled="true"> گام 3</a>
    </div>
</div>

<!-- Four Step Example-->
<div class="step">
    <div class="step-item">
        <a class="step-item-link" href="#!"> گام 1</a>
    </div>
    <div class="step-item">
        <a class="step-item-link" href="#!"> گام 2</a>
    </div>
    <div class="step-item active">
        <a class="step-item-link" href="#!"> گام 3</a>
    </div>
    <div class="step-item">
        <a class="step-item-link disabled" href="#!" tabindex="-1" aria-disabled="true"> گام 4</a>
    </div>
</div>

<!-- Five Step Example-->
<div class="step">
    <div class="step-item">
        <a class="step-item-link" href="#!"> گام 1</a>
    </div>
    <div class="step-item">
        <a class="step-item-link" href="#!"> گام 2</a>
    </div>
    <div class="step-item active">
        <a class="step-item-link" href="#!"> گام 3</a>
    </div>
    <div class="step-item">
        <a class="step-item-link disabled" href="#!" tabindex="-1" aria-disabled="true"> گام 4</a>
    </div>
    <div class="step-item">
        <a class="step-item-link disabled" href="#!" tabindex="-1" aria-disabled="true"> گام 5</a>
    </div>
</div>