/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

2 votes207 views1 answer
How to include a dash in html
Html
0 vote189 views1 answer
How to show pdf as image in html
Html
0 vote185 views1 answer
Cannot play media. no decoders for requested formats: text/html
Html
2 votes212 views1 answer
Twig count array
Html
0 vote183 views1 answer
Fonts.google.com montserrat
Html
9 votes217 views6 answers
Table in bootstrap 4
Html
0 vote187 views1 answer
Block media keys from html audio pause
Html
0 vote194 views1 answer
How to call a function when dropdown menu's value is selected in html
Html
15 votes201 views2 answers
Bootstrap font-weight bold
Html
0 vote184 views1 answer
Test.html
Html