Breaking News: Grepper is joining You.com. Read the official announcement!

Vertical Tabs Bootstrap

Add Answer

Muhammad Waqas answered on May 19, 2021 Popularity 9/10 Helpfulness 4/10

answer Vertical Tabs Bootstrap

related vertical tab bootstrap

related vertical tabs in bootstrap 4

related bootstrap 4 vertical tabs responsive

Vertical Tabs Bootstrap

Comment

<div class="row">
  <div class="col-3">
    <!-- Tab navs -->
    <div
      class="nav flex-column nav-tabs text-center"
      id="v-tabs-tab"
      role="tablist"
      aria-orientation="vertical"
    >
      <a
        class="nav-link active"
        id="v-tabs-home-tab"
        data-mdb-toggle="tab"
        href="#v-tabs-home"
        role="tab"
        aria-controls="v-tabs-home"
        aria-selected="true"
        >Home</a
      >
      <a
        class="nav-link"
        id="v-tabs-profile-tab"
        data-mdb-toggle="tab"
        href="#v-tabs-profile"
        role="tab"
        aria-controls="v-tabs-profile"
        aria-selected="false"
        >Profile</a
      >
      <a
        class="nav-link"
        id="v-tabs-messages-tab"
        data-mdb-toggle="tab"
        href="#v-tabs-messages"
        role="tab"
        aria-controls="v-tabs-messages"
        aria-selected="false"
        >Messages</a
      >
    </div>
    <!-- Tab navs -->
  </div>

  <div class="col-9">
    <!-- Tab content -->
    <div class="tab-content" id="v-tabs-tabContent">
      <div
        class="tab-pane fade show active"
        id="v-tabs-home"
        role="tabpanel"
        aria-labelledby="v-tabs-home-tab"
      >
        Home content
      </div>
      <div
        class="tab-pane fade"
        id="v-tabs-profile"
        role="tabpanel"
        aria-labelledby="v-tabs-profile-tab"
      >
        Profile content
      </div>
      <div
        class="tab-pane fade"
        id="v-tabs-messages"
        role="tabpanel"
        aria-labelledby="v-tabs-messages-tab"
      >
        Messages content
      </div>
    </div>
    <!-- Tab content -->
  </div>
</div>

Popularity 9/10 Helpfulness 4/10 Language html

Source: mdbootstrap.com

Tags: html tabs

Link to this answer
Share Copy Link

Contributed on Jun 06 2022

Muhammad Waqas

0 Answers Avg Quality 2/10

Closely Related Answers

vertical tab bootstrap

Comment

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
    </div>
  </div>
</div>

Popularity 10/10 Helpfulness 5/10 Language html

Source: getbootstrap.com

Tags: html

Link to this answer
Share Copy Link

Contributed on May 19 2021

Clear Cicada

0 Answers Avg Quality 2/10

vertical tabs in bootstrap 4

Comment

dont be a poes

Popularity 10/10 Helpfulness 1/10 Language php

Source: Grepper

Tags: bootstrap-4 boot

Link to this answer
Share Copy Link

Contributed on Jul 21 2021

Bored Beetle

0 Answers Avg Quality 2/10

bootstrap 4 vertical tabs responsive

Comment

hmmm thanks a lot

Popularity 1/10 Helpfulness 1/10 Language html

Source: Grepper

Tags: bootstrap-4 html responsive tabs

Link to this answer
Share Copy Link

Contributed on Jul 01 2021

Innocent Impala

0 Answers Avg Quality 2/10

Vertical Tabs Bootstrap

Contents

More Related Answers

Vertical Tabs Bootstrap

Closely Related Answers

vertical tab bootstrap

vertical tabs in bootstrap 4

bootstrap 4 vertical tabs responsive

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.