فرم ویزارد توضیحات عنوان صفحه در اینجا می رود...

<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. گام فعال text</div>
      </a>
    </div>
  
    <!-- disabled -->
    <div class="nav-item col">
      <a class="nav-link disabled" href="#">
        <div class="nav-text">3. گتم غیرفعال 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-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>