<div class="card">
  <div class="card-body">

    <div id="progrss-wizard" class="twitter-bs-wizard">
      <ul class="twitter-bs-wizard-nav nav-justified nav nav-pills">
        <li class="nav-item">
          <a href="#progress-seller-details" class="nav-link" data-toggle="tab">
            <span class="step-number mr-2">01</span>
            Seller Details
          </a>
        </li>
        <li class="nav-item">
          <a href="#progress-company-document" class="nav-link" data-toggle="tab">
            <span class="step-number mr-2">02</span>
            Company Document
          </a>
        </li>

        <li class="nav-item">
          <a href="#progress-bank-detail" class="nav-link" data-toggle="tab">
            <span class="step-number mr-2">03</span>
            Bank Details
          </a>
        </li>
        <li class="nav-item">
          <a href="#progress-confirm-detail" class="nav-link active" data-toggle="tab">
            <span class="step-number mr-2">04</span>
            Confirm Detail
          </a>
        </li>
      </ul>

      <div id="bar" class="progress mt-4">
        <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width: 100%;"></div>
      </div>

      <div class="tab-pane active" id="progress-confirm-detail">
        <div class="row justify-content-center">
          <div class="col-lg-6">
            <div class="text-center">
              <div class="mb-4 mt-4">
                <i class="mdi mdi-check-circle-outline text-success display-4"></i>
              </div>
              <div>
                <h5>Confirm Detail</h5>
                <p class="text-muted">If several languages coalesce, the grammar of the resulting</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>