Tabbed form

Tabs can help create a more organized look and make forms easier to use. Tabbed interface is already present in the bootstrap library. Refer to bootstrap documentation to learn how to use the tabs.

This template adds responsive behavior for this type of navigation. To create responsive tabs you need to combine tabs and collapse. Also, you need to use the .nav-tabs-responsive wrapper and .nav-link-collapse for collapse trigger.

The implementation of responsive behavior has the inconvenience of duplicate the trigger, one for the tab and one for the collapse.

Source code
<div class="nav-tabs-responsive">
  <div class="card">
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <a href="#account" class="nav-link active" data-toggle="tab">
          <i class="fa fa-lock mr-2"></i> Account
        </a>
      </li>
      <li class="nav-item">
        <a href="#personal" class="nav-link" data-toggle="tab">
          <i class="fa fa-user-circle-o mr-2"></i> Personal
        </a>
      </li>
      <li class="nav-item">
        <a href="#payment" class="nav-link" data-toggle="tab">
          <i class="fa fa-credit-card mr-2"></i> Payment
        </a>
      </li>
    </ul>
    <div id="tabContent" class="tab-content">
      <div id="account" class="tab-pane show active">
        <a href="#account-collapse" class="nav-link-collapse" data-toggle="collapse">
          <i class="fa fa-lock mr-2"></i> Account
        </a>
        <div id="account-collapse" class="collapse show" data-parent="#tabContent">
          <div class="card-body">
            <!-- Account content -->
          </div>
        </div>
      </div>
      <div id="personal" class="tab-pane">
        <a href="#personal-collapse" class="nav-link-collapse" data-toggle="collapse">
          <i class="fa fa-user-circle-o mr-2"></i> Personal
        </a>
        <div id="personal-collapse" class="collapse" data-parent="#tabContent">
          <div class="card-body">
            <!-- Personal content -->
          </div>
        </div>
      </div>
      <div id="payment" class="tab-pane">
        <a href="#payment-collapse" class="nav-link-collapse" data-toggle="collapse">
          <i class="fa fa-credit-card mr-2"></i> Payment
        </a>
        <div id="payment-collapse" class="collapse" data-parent="#tabContent">
          <div class="card-body">
            <!-- Payment content -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="form-group">
  <button type="submit" class="btn btn-primary mr-1">
    Save
  </button>
  <button type="button" class="btn btn-secondary">
    Cancel
  </button>
</div>