Bootstrap Horizontal Scrollable Tabs — Free Snippet

<div class="container py-5">
  <div class="bshtabs-wrap">
    <button class="bshtabs-arrow bshtabs-left" id="bshtabsLeft" aria-label="Scroll tabs left">‹</button>
    <ul class="nav nav-tabs bshtabs-nav flex-nowrap" id="bshtabsNav" role="tablist">
      <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#bsh-overview">Overview</button></li>
      <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#bsh-specs">Specifications</button></li>
      <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#bsh-reviews">Reviews</button></li>
      <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#bsh-shipping">Shipping &amp; Returns</button></li>
      <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#bsh-warranty">Warranty</button></li>
      <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#bsh-faq">FAQ</button></li>
      <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#bsh-support">Support</button></li>
    </ul>
    <button class="bshtabs-arrow bshtabs-right" id="bshtabsRight" aria-label="Scroll tabs right">›</button>
  </div>
  <div class="tab-content bshtabs-content p-3">
    <div class="tab-pane fade show active" id="bsh-overview">A compact, precision-milled aluminum stand for any 13–34" monitor.</div>
    <div class="tab-pane fade" id="bsh-specs">Weight capacity: 20kg. Height: 12cm. Material: 6061 aluminum.</div>
    <div class="tab-pane fade" id="bsh-reviews">4.8 out of 5 stars, based on 214 reviews.</div>
    <div class="tab-pane fade" id="bsh-shipping">Free shipping over $50. Returns accepted within 30 days.</div>
    <div class="tab-pane fade" id="bsh-warranty">2-year limited warranty against manufacturing defects.</div>
    <div class="tab-pane fade" id="bsh-faq">Compatible with all standard VESA mounts.</div>
    <div class="tab-pane fade" id="bsh-support">Contact [email protected] for help with your order.</div>
  </div>
</div>

.bshtabs-wrap { display: flex; align-items: center; gap: 4px; }
.bshtabs-nav {
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
}
.bshtabs-nav::-webkit-scrollbar { display: none; }
.bshtabs-nav .nav-link { white-space: nowrap; }
.bshtabs-arrow {
  flex-shrink: 0; width: 28px; height: 32px;
  border: 1px solid #e5e7eb; border-radius: 6px;
  background: #fff; cursor: pointer; font-size: 16px; color: #6b7280;
}
.bshtabs-arrow:hover { border-color: #6366f1; color: #6366f1; }
.bshtabs-content { border: 1px solid #dee2e6; border-top: none; font-size: 14px; color: #374151; }

const nav = document.getElementById('bshtabsNav');
const left = document.getElementById('bshtabsLeft');
const right = document.getElementById('bshtabsRight');

// Bootstrap's Tab component handles switching panes; these two buttons just
// scroll the tab strip itself, for when there are too many tabs to fit.
left.addEventListener('click', () => nav.scrollBy({ left: -160, behavior: 'smooth' }));
right.addEventListener('click', () => nav.scrollBy({ left: 160, behavior: 'smooth' }));

// Clicking a tab scrolls it into view, in case it's currently off-screen —
// keyboard/tab navigation shouldn't require also manually scrolling the strip.
nav.addEventListener('shown.bs.tab', e => {
  e.target.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
});