Using Bootstrap 5 vertical pills, how to display tab content directly under the nav link on mobile devices?

Question

The vertical pills layout is exactly what I want for desktop devices, but for small screen sizes, I want it to be more compact. I need the tab-pane text to display under the nav-link - like under each individual nav-link, not below the whole group of nav-pills.

The following is the base example on the Bootstrap v5 documentation:

<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>

I tried moving the tab-pane elements directly under their perspective nav-links, but I couldn't get it to work.

Is this possible to do what I'm envisioning? Or alternatively, is there a better way to set this up?

score 0 · Answer 1 · answered Jan 31 '23 at 08:19

Here is an example using Bootstrap 5's responsive grid classes and CSS media queries to achieve the desired behavior:

<div class="d-flex flex-column flex-md-row align-items-start">
  <div class="nav flex-column nav-pills w-100 w-md-auto 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 w-100" 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>

<style>
@media (max-width: 767.98px) {
  .nav-pills {
    display: flex;
    flex-wrap: wrap;
  }

  .tab-content {
    display: flex;
    flex-wrap: wrap;
  }

  .tab-pane {
    width: 100%;
  }
}
</style>`

This will display the nav-pills vertically on larger screens, and horizontally on smaller screens, with the tab-pane elements displayed directly underneath the corresponding nav-link.

Thanks, but that's not exactly what I was looking for. I was hoping to have the tab content appear in-between Home and Profile. Not bellow all four... — continuingweb, Feb 01 '23 at 03:45

Using Bootstrap 5 vertical pills, how to display tab content directly under the nav link on mobile devices?

1 Answers1