<div class="row">
  <div class="col-12 col-lg-6">
    <div class="card">
      <div class="card-header">
        Basic information
      </div>
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action">
          <div class="d-flex">
            <span>
              <i class="fa fa-fw fa-user-circle-o text-gray-600 mr-2"></i> Edit profile
            </span>
            <span class="text-primary ml-auto">
              <i class="fa fa-fw fa-angle-right"></i>
            </span>
          </div>
        </a>
        <a href="#" class="list-group-item list-group-item-action">
          <div class="d-flex">
            <span>
              <i class="fa fa-fw fa-lock text-gray-600 mr-2"></i> Change password
            </span>
            <span class="text-primary ml-auto">
              <i class="fa fa-fw fa-angle-right"></i>
            </span>
          </div>
        </a>
        <a href="#" class="list-group-item list-group-item-action">
          <div class="d-flex">
            <span>
              <i class="fa fa-fw fa-paper-plane text-gray-600 mr-2"></i> Notifications
            </span>
            <span class="text-primary ml-auto">
              <i class="fa fa-fw fa-angle-right"></i>
            </span>
          </div>
        </a>
        <a href="#" class="list-group-item list-group-item-action">
          <div class="d-flex">
            <span>
              <i class="fa fa-fw fa-language text-gray-600 mr-2"></i> Language
            </span>
            <span class="text-primary ml-auto">
              <i class="fa fa-fw fa-angle-right"></i>
            </span>
          </div>
        </a>
      </div>
    </div>
  </div>
  <div class="col-12 col-lg-6">
    <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">
              Social accounts
            </a>
          </li>
          <li class="nav-item">
            <a href="#personal" class="nav-link" data-toggle="tab">
              Appearance
            </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">
              Social accounts
            </a>
            <div id="account-collapse" class="collapse show" data-parent="#tabContent">
              <ul class="list-group">
                <li class="list-group-item">
                  <div class="d-flex">
                    <span>
                      <i class="fa fa-fw fa-facebook-official text-gray-600 mr-2"></i> Facebook
                    </span>
                    <label class="switch switch-to-success ml-auto">
                      <input type="checkbox" checked>
                      <span class="switch-slider"></span>
                    </label>
                  </div>
                </li>
                <li class="list-group-item">
                  <div class="d-flex">
                    <span>
                      <i class="fa fa-fw fa-twitter text-gray-600 mr-2"></i> Twitter
                    </span>
                    <label class="switch switch-to-success ml-auto">
                      <input type="checkbox" checked>
                      <span class="switch-slider"></span>
                    </label>
                  </div>
                </li>
                <li class="list-group-item">
                  <div class="d-flex">
                    <span>
                      <i class="fa fa-fw fa-instagram text-gray-600 mr-2"></i> Instagram
                    </span>
                    <label class="switch switch-to-success ml-auto">
                      <input type="checkbox">
                      <span class="switch-slider"></span>
                    </label>
                  </div>
                </li>
                <li class="list-group-item">
                  <div class="d-flex">
                    <span>
                      <i class="fa fa-fw fa-google-plus-square text-gray-600 mr-2"></i> Google
                    </span>
                    <label class="switch switch-to-success ml-auto">
                      <input type="checkbox">
                      <span class="switch-slider"></span>
                    </label>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div id="personal" class="tab-pane">
            <a href="#personal-collapse" class="nav-link-collapse" data-toggle="collapse">
              Appearance
            </a>
            <div id="personal-collapse" class="collapse" data-parent="#tabContent">
              <div class="list-group">
                <a href="#" class="list-group-item list-group-item-action">
                  <div class="d-flex">
                    <span>
                      <i class="fa fa-fw fa-picture-o text-gray-600 mr-2"></i> Set wallpaper
                    </span>
                    <span class="text-primary ml-auto">
                      <i class="fa fa-fw fa-angle-right"></i>
                    </span>
                  </div>
                </a>
                <a href="#" class="list-group-item list-group-item-action">
                  <div class="d-flex">
                    <span>
                      <i class="fa fa-fw fa-window-maximize text-gray-600 mr-2"></i> Themes
                    </span>
                    <span class="text-primary ml-auto">
                      <i class="fa fa-fw fa-angle-right"></i>
                    </span>
                  </div>
                </a>
                <div class="list-group-item">
                  <div class="d-flex">
                    <span>
                      Show home button
                    </span>
                    <label class="switch switch-to-success ml-auto">
                      <input type="checkbox">
                      <span class="switch-slider"></span>
                    </label>
                  </div>
                </div>
                <div class="list-group-item">
                  <div class="d-flex">
                    <span>
                      Show the search bar
                    </span>
                    <label class="switch switch-to-success ml-auto">
                      <input type="checkbox">
                      <span class="switch-slider"></span>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="card">
  <div class="card-header">
    Dangerous zone
  </div>
  <ul class="list-group">
    <li class="list-group-item">
      <div class="d-lg-flex">
        <div class="mb-3 mb-lg-0">
          <strong>Temporarily disable account</strong><br>
          You will be hidden from another users until you reactive your account.
        </div>
        <div class="ml-auto">
          <button type="button" class="btn btn-outline-danger">
            <span class="text-nowrap">Disable my account</span>
          </button>
        </div>
      </div>
    </li>
    <li class="list-group-item">
      <div class="d-lg-flex">
        <div class="mb-3 mb-lg-0">
          <strong>Cancel account</strong><br>
          Delete all data. Once you cancel your account, there is no going back.
        </div>
        <div class="ml-auto">
          <button type="button" class="btn btn-outline-danger">
            <span class="text-nowrap">Cancel my account</span>
          </button>
        </div>
      </div>
    </li>
  </ul>
</div>