How to navigate using nav-item after submit btn click in bootstrap?

You have navigation issues because of class="nav-link active" that's not dynamic so your display div will be always nav number one.
To fix that you have to do some change.
I suppose you are developing an angular app so first in your .ts file you need to add two things :

1. add a variable named for example selectedTab and we pass an initial value of 1.
2. add this function :

 public onClickSelectTab(navIndex: number) {
    return (this.selectedTab = navIndex);
  }

to resume your .ts have to look like this:

 selectedTab = 1;

  public onClickSelectTab(navIndex: number) {
    return (this.selectedTab = navIndex);
  }

After that update you have to do some changes in your .html file

3. add a (click) param to your a tags like this:

  <li class="nav-item">
      <a
        class="nav-link active"
        (click)="onClickSelectTab(1)"
        data-toggle="tab"
        href="./#tabs-1"
        role="tab"
        >Video consultation</a
      >
    </li>
    <li class="nav-item">
      <a
        class="nav-link"
        data-toggle="tab"
        (click)="onClickSelectTab(2)"
        href="./#tabs-2"
        role="tab"
        >In-clinic consultation</a
      >
    </li>
    <li class="nav-item">
      <a
        class="nav-link"
        (click)="onClickSelectTab(3)"
        data-toggle="tab"
        href="./#tabs-3"
        role="tab"
        >Time Off</a
      >
    </li>

2. add dynamic class to your div :

  <div
      class="tab-pane"
      [ngClass]="{'active':selectedTab===1 } "
      id="tabs-1"
      role="tabpanel"
    >
      <div class="carddesign" style="padding: 20px;">
        <div>form1</div>
        <button>update1</button>
      </div>
    </div>
    <div
      class="tab-pane"
      [ngClass]="{'active':selectedTab===2 } "
      id="tabs-2"
      role="tabpanel"
    >
      <div class="row carddesign" style="padding: 0px 15px 40px;">
        <div>form2</div>
        <button>update2</button>
      </div>
    </div>
    <div
      [ngClass]="{'active':selectedTab===3 } "
      class="tab-pane"
      id="tabs-3"
      role="tabpanel"
    >
      <div class="carddesign" style="padding: 20px;">
        <div>form3</div>
        <button>update3</button>
      </div>
    </div>
  </div>

see an example here.

You better replace <button>update1<button> on <a href="#tabs-2">update1</a>

If you using angular use <a [routerLink]="['/tabs-2']">update1</a>

Or do it in code

<button (click)="navigateToTabs2()">update1<button>

constructor(private router: Router) { }

navigateToTabs2() {
  this.router.navigate(['/tabs-2']);
}

html:

       <ul class="nav nav-tabs" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" [ngClass]="{'active':selectedTab===1 }" data-toggle="tab" href="#tabs-1" role="tab">Video consultation</a>
          </li>
          <li class="nav-item">
            <a class="nav-link"  [ngClass]="{'active':selectedTab===2 }" data-toggle="tab" href="#tabs-2" role="tab">In-clinic consultation</a>
          </li>
          <li class="nav-item">
            <a class="nav-link"  [ngClass]="{'active':selectedTab===3 }" data-toggle="tab" href="#tabs-3" role="tab">Time Off</a>
          </li>
        </ul>
     <div class="col-md-3 col-sm-12" style="margin-left: 70%;" 
       (click)="updateSevenProfile()">
          <a (click)="onClickSelectTab(3)" data-toggle="tab" href="#tabs-3" 
               role="tab">
             <button>Update1</button>
          </a>
        </div>