John Doe
john.doe@email.com

Source code
HTML JavaScript
<div class="nav-tabs-responsive">
  <ul class="nav nav-tabs-progress nav-tabs-4 mb-4">
    <li class="nav-item">
      <a href="#account" class="nav-link active" data-toggle="tab">
        <span class="font-lg">1.</span> Account information
        <small class="d-block text-secondary">
          Lorem ipsum dolor sit amet, venenatis adipiscing
        </small>
      </a>
    </li>
    <li class="nav-item">
      <a href="#personal" class="nav-link" data-toggle="tab">
        <span class="font-lg">2.</span> Personal information
        <small class="d-block text-secondary">
          Lorem ipsum dolor sit amet, venenatis adipiscing
        </small>
      </a>
    </li>
    <li class="nav-item">
      <a href="#payment" class="nav-link" data-toggle="tab">
        <span class="font-lg">3.</span> Payment information
        <small class="d-block text-secondary">
          Lorem ipsum dolor sit amet, venenatis adipiscing
        </small>
      </a>
    </li>
    <li class="nav-item">
      <a href="#confirmation" class="nav-link" data-toggle="tab">
        <span class="font-lg">4.</span> Confirm your details
        <small class="d-block text-secondary">
          Lorem ipsum dolor sit amet, venenatis adipiscing
        </small>
      </a>
    </li>
  </ul>
  <form id="formOrder" class="tab-content">
    <div id="account" class="tab-pane show active">
      <div class="mb-3">
        <a href="#account-collapse" data-toggle="collapse">
          <span class="font-lg">1.</span> Account information
          <small class="d-block text-secondary">
            Lorem ipsum dolor sit amet, venenatis adipiscing
          </small>
        </a>
      </div>
      <div id="account-collapse" class="collapse show" data-parent="#formOrder">
        <div class="text-secondary mb-3">
          <small>Step 1 of 4</small>
        </div>
        <div class="row">
          <div class="col-12 col-md-6 col-lg-6">
            <div class="form-group">
              <label>Username</label>
              <input type="text" class="form-control">
            </div>
          </div>
          <div class="col-12 col-md-6 col-lg-6">
            <div class="form-group">
              <label>E-mail</label>
              <input type="text" class="form-control">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12 col-md-6 col-lg-6">
            <div class="form-group">
              <label>Password</label>
              <input type="password" class="form-control">
            </div>
          </div>
          <div class="col-12 col-md-6 col-lg-6">
            <div class="form-group">
              <label>Confirm password</label>
              <input type="password" class="form-control">
            </div>
          </div>
        </div>
        <div class="d-none d-md-block">
          <hr>
          <div class="d-flex mb-3">
            <button type="button" class="btn btn-success ml-auto" data-form-step="#personal">
              Personal information  
              <i class="icon-arrow-right font-sm"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div id="personal" class="tab-pane">
      <div class="mb-3">
        <a href="#personal-collapse" data-toggle="collapse">
          <span class="font-lg">2.</span> Personal information
          <small class="d-block text-secondary">
            Lorem ipsum dolor sit amet, venenatis adipiscing
          </small>
        </a>
      </div>
      <div id="personal-collapse" class="collapse" data-parent="#formOrder">
        <div class="text-secondary mb-3">
          <small>Step 2 of 4</small>
        </div>
        <div class="row">
          <div class="col-12 col-lg-6">
            <div class="form-group">
              <label>Full name</label>
              <input type="text" class="form-control">
            </div>
          </div>
          <div class="col-12 col-lg-6">
            <div class="row">
              <div class="col-12 col-md-6 col-lg-6">
                <div class="form-group">
                  <label>Gender</label>
                  <select class="form-control">
                    <option></option>
                    <option>Female</option>
                    <option>Male</option>
                  </select>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-6">
                <div class="form-group">
                  <label>Date of birth</label>
                  <input type="text" class="form-control">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12 col-md-6 col-lg-6">
            <div class="form-group">
              <label>Email</label>
              <input type="text" class="form-control">
            </div>
          </div>
          <div class="col-12 col-md-6 col-lg-6">
            <div class="form-group">
              <label>Phone number</label>
              <input type="text" class="form-control">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12 col-lg-6">
            <div class="row">
              <div class="col-12 col-md-6 col-lg-6">
                <div class="form-group">
                  <label>Zip code</label>
                  <input type="text" class="form-control">
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-6">
                <div class="form-group">
                  <label>State</label>
                  <input type="text" class="form-control">
                </div>
              </div>
            </div>
          </div>
          <div class="col-12 col-lg-6">
            <div class="form-group">
              <label>Home address</label>
              <input type="text" class="form-control">
            </div>
          </div>
        </div>
        <div class="d-none d-md-block">
          <hr>
          <div class="d-flex mb-3">
            <button type="button" class="btn btn-outline-success" data-form-step="#account">
              <i class="icon-arrow-left font-sm"></i>
                Account information
            </button>
            <button type="button" class="btn btn-success ml-auto" data-form-step="#payment">
              Payment information  
              <i class="icon-arrow-right font-sm"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div id="payment" class="tab-pane">
      <div class="mb-3">
        <a href="#payment-collapse" data-toggle="collapse">
          <span class="font-lg">3.</span> Payment information
          <small class="d-block text-secondary">
            Lorem ipsum dolor sit amet, venenatis adipiscing
          </small>
        </a>
      </div>
      <div id="payment-collapse" class="collapse" data-parent="#formOrder">
        <div class="text-secondary mb-3">
          <small>Step 3 of 4</small>
        </div>
        <div class="row">
          <div class="col-12 col-md-8 col-lg-8">
            <div class="form-group">
              <label>Card number</label>
              <input type="text" class="form-control">
            </div>
          </div>
          <div class="col-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label>CVC</label>
              <input type="text" class="form-control">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12 col-lg-8">
            <div class="form-group">
              <label>Card holder name</label>
              <input type="text" class="form-control">
            </div>
          </div>
          <div class="col-12 col-lg-4">
            <div class="row">
              <div class="col-12 col-md-4 col-lg-6">
                <div class="form-group">
                  <label>Expiry month</label>
                  <input type="text" class="form-control">
                </div>
              </div>
              <div class="col-12 col-md-4 col-lg-6">
                <div class="form-group">
                  <label>Expiry year</label>
                  <input type="text" class="form-control">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="d-none d-md-block">
          <hr>
          <div class="d-flex mb-3">
            <button type="button" class="btn btn-outline-success" data-form-step="#personal">
              <i class="icon-arrow-left font-sm"></i>
                Personal information
            </button>
            <button type="button" class="btn btn-success ml-auto" data-form-step="#confirmation">
              Confirm your details  
              <i class="icon-arrow-right font-sm"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div id="confirmation" class="tab-pane">
      <div class="mb-3">
        <a href="#confirmation-collapse" data-toggle="collapse">
          <span class="font-lg">4.</span> Confirm your details
          <small class="d-block text-secondary">
            Lorem ipsum dolor sit amet, venenatis adipiscing
          </small>
        </a>
      </div>
      <div id="confirmation-collapse" class="collapse" data-parent="#formOrder">
        <div class="text-secondary mb-3">
          <small>Step 4 of 4</small>
        </div>
        <div class="card">
          <div class="card-body">
            <div class="row">
              <div class="col-12 col-md-3 col-lg-2">
                <label class="text-secondary">Username</label>
              </div>
              <div class="col-12 col-md-9 col-lg-10">
                <div class="mb-2">john_doe</div>
              </div>
            </div>
            <div class="row">
              <div class="col-12 col-md-3 col-lg-2">
                <label class="text-secondary">Email ID</label>
              </div>
              <div class="col-12 col-md-9 col-lg-10">
                <div class="mb-2">john_doe@email.com</div>
              </div>
            </div>
            <div class="row">
              <div class="col-12 col-md-3 col-lg-2">
                <label class="text-secondary">Full name</label>
              </div>
              <div class="col-12 col-md-9 col-lg-10">
                <div class="mb-2">John Doe</div>
              </div>
            </div>
            <div class="row">
              <div class="col-12 col-md-3 col-lg-2">
                <label class="text-secondary">Gender</label>
              </div>
              <div class="col-12 col-md-9 col-lg-10">
                <div class="mb-2">Male</div>
              </div>
            </div>
            <div class="row">
              <div class="col-12 col-md-3 col-lg-2">
                <label class="text-secondary">Date of birth</label>
              </div>
              <div class="col-12 col-md-9 col-lg-10">
                <div class="mb-2">January 10, 1980</div>
              </div>
            </div>
            <div class="row">
              <div class="col-12 col-md-3 col-lg-2">
                <label class="text-secondary">Phone number</label>
              </div>
              <div class="col-12 col-md-9 col-lg-10">
                <div class="mb-2">John Doe</div>
              </div>
            </div>
            <div class="row">
              <div class="col-12 col-md-3 col-lg-2">
                <label class="text-secondary">Address</label>
              </div>
              <div class="col-12 col-md-9 col-lg-10">
                <div class="mb-2">111 W.App Ave. Suite 123, Sunway, CA</div>
              </div>
            </div>
            <div class="row">
              <div class="col-12 col-md-3 col-lg-2">
                <label class="text-secondary">ZIP Code</label>
              </div>
              <div class="col-12 col-md-9 col-lg-10">
                <div class="mb-2">94086</div>
              </div>
            </div>
            <div class="row">
              <div class="col-12 col-md-3 col-lg-2">
                <label class="text-secondary">Country</label>
              </div>
              <div class="col-12 col-md-9 col-lg-10">
                <div class="mb-2">USA</div>
              </div>
            </div>
            <div class="row">
              <div class="col-12 col-md-3 col-lg-2">
                <label class="text-secondary">Card number</label>
              </div>
              <div class="col-12 col-md-9 col-lg-10">
                <div class="mb-2">**** 2086</div>
              </div>
            </div>
            <div class="row">
              <div class="col-12 col-md-3 col-lg-2">
                <label class="text-secondary">Card type</label>
              </div>
              <div class="col-12 col-md-9 col-lg-10">
                <div class="mb-2">VISA</div>
              </div>
            </div>
          </div>
        </div>
        <hr>
        <div class="d-block d-md-flex">
          <button type="button" class="btn btn-outline-success d-none d-md-inline mb-3" data-form-step="#payment">
            <i class="icon-arrow-left font-sm"></i>
              Payment information
          </button>
          <div class="d-block d-md-inline ml-auto mb-3">
            <button type="submit" class="btn btn-success btn-block">
              Complete order
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

$('[data-form-step]').on('click', function () {
  var tabId = $(this).attr('data-form-step');
  $('[href="' + tabId + '"]').tab('show');
});

$('#formOrder').on('submit', function(e) {
  $('.nav-tabs-progress').find('.nav-item').last().addClass('complete');
  e.preventDefault();
});
Refer to tabs documentation to learn more about it.
1. Account information Lorem ipsum dolor sit amet, venenatis adipiscing
Step 1 of 4
2. Personal information Lorem ipsum dolor sit amet, venenatis adipiscing
Step 2 of 4
3. Payment information Lorem ipsum dolor sit amet, venenatis adipiscing
Step 3 of 4
4. Confirm your details Lorem ipsum dolor sit amet, venenatis adipiscing
Step 4 of 4
john_doe
john_doe@email.com
John Doe
Male
January 10, 1980
John Doe
111 W.App Ave. Suite 123, Sunway, CA
94086
USA
**** 2086
VISA