/Html/Pills vertically with content on right

Pills vertically with content on right

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <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>

Source: getbootstrap.com

Similar codes

1 vote141 views1 answer
A tag for top of the page
Html
0 vote190 views1 answer
Equipages meaning
Html
1 vote254 views5 answers
Html cheat sheet
Html
0 vote157 views1 answer
Ionic 5-star-rating
Html
0 vote156 views2 answers
Center a video horizontally
Html
0 vote142 views1 answer
Cshtml set a max value foreach
Html
0 vote147 views1 answer
How to call a function when dropdown menu's value is selected in html
Html
1 vote194 views2 answers
Change htmlwebpackplugin.options.title
Html
-1 vote155 views1 answer
Uncaught ReferenceError: Chartist is not defined
Html
0 vote138 views1 answer
Call angular function from html
Html