ویزاد توضیح هدر در این قسمت قرار دارد...

<div class="nav-wizards-container">
  <nav class="nav nav-wizards-1 mb-2">
    <!-- completed -->
    <div class="nav-item col">
      <a class="nav-link completed" href="#">
        <div class="nav-no">1</div>
        <div class="nav-text">مرحله تمام شده</div>
      </a>
    </div>
  
    <!-- active -->
    <div class="nav-item col">
      <a class="nav-link active" href="#">
        <div class="nav-no">3</div>
        <div class="nav-text">مرحله فعال</div>
      </a>
    </div>
  
    <!-- disabled -->
    <div class="nav-item col">
      <a class="nav-link disabled" href="#">
        <div class="nav-no">5</div>
        <div class="nav-text">مرحله آخر</div>
      </a>
    </div>
  </nav>
</div>

<div class="card">
  <div class="card-body">
    محتوا ویزاد در اینجا قرار دارد
  </div>
</div>

<div class="nav-wizards-container">
  <nav class="nav nav-wizards-2 mb-3">
    <!-- completed -->
    <div class="nav-item col">
      <a class="nav-link completed" href="#">
        <div class="nav-text">1. مرحله تمام شده text</div>
      </a>
    </div>
  
    <!-- active -->
    <div class="nav-item col">
      <a class="nav-link active" href="#">
        <div class="nav-text">2. مرحله متن</div>
      </a>
    </div>
  
    <!-- disabled -->
    <div class="nav-item col">
      <a class="nav-link disabled" href="#">
        <div class="nav-text">3.مرحله متن غیرفعال</div>
      </a>
    </div>
  </nav>
</div>

<div class="card">
  <div class="card-body">
    محتوا ویزاد در اینجا قرار دارد
  </div>
</div>

<div class="nav-wizards-container">
  <nav class="nav nav-wizards-3 mb-2">
    <!-- completed -->
    <div class="nav-item col">
      <a class="nav-link completed" href="#">
        <div class="nav-dot"></div>
        <div class="nav-no">Step 1</div>
        <div class="nav-text">مرحله تمام شده</div>
      </a>
    </div>
  
    <!-- active -->
    <div class="nav-item col">
      <a class="nav-link active" href="#">
        <div class="nav-dot"></div>
        <div class="nav-no">Step 3</div>
        <div class="nav-text">مرحله فعال</div>
      </a>
    </div>
  
    <!-- disabled -->
    <div class="nav-item col">
      <a class="nav-link disabled" href="#">
        <div class="nav-dot"></div>
        <div class="nav-no">Step 5</div>
        <div class="nav-text">مرحله آخر</div>
      </a>
    </div>
  </nav>
</div>

<div class="card">
  <div class="card-body">
    محتوا ویزاد در اینجا قرار دارد
  </div>
</div>