Bootstrap horizontal scrollable tab bar

Question

I am creating an app in Bootstrap 3 with a tab bar. I am dynamically adding and removing tabs. This all works great, what I would like to do though is to have the tab bar be horizontally scrollable through the tabs if there are too many tabs to fit in the width of the app instead of creating multiple rows or tabs.

Has anyone done this or have an idea how to implement this?

Oestrogen

Answer 1

Here is an example:

(Not working in snippet for some reason, so here is a link to Bootply : http://www.bootply.com/oROUAMwsG1)

.nav-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  display: -webkit-box;
  display: -moz-box;
}
.nav-tabs>li {
  float: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="col-md-4">
    <div class="tabbable">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a>
        </li>
        <li><a href="#tab2" data-toggle="tab">Section 2</a>
        </li>
        <li><a href="#tab2" data-toggle="tab">Section 3</a>
        </li>
        <li><a href="#tab2" data-toggle="tab">Section 4</a>
        </li>
        <li><a href="#tab2" data-toggle="tab">Section 5</a>
        </li>
        <li><a href="#tab2" data-toggle="tab">Section 6</a>
        </li>
        <li><a href="#tab2" data-toggle="tab">Section 7</a>
        </li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="tab1">
          <p>I'm in Section 1.</p>
        </div>
        <div class="tab-pane" id="tab2">
          <p>I'm in Section 2.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Farrison

I had to this in a mobile environment and I've used your solution and put it together with a jQuery plugin to with arrows to control the scrolling. If it would help anyone here is the link for the repository github.com/LucasLazaro/bootstrap-nav-tab-scrollable . Cheers. – Attaboy

I believe the syntax you should be using is the most recent and correct flex box syntax. The safest might be this: display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; – Giuseppinagiustina

Is there anyway to fix the bottom border that is now added as a result of this, when the tabs fit nicely on the page, and doesn't need scrolling? when removing the overflow properties, it gets removed. – Perjured

This breaks the functionality of having dropdowns inside the tabs. The dropdown menus will not be shown because of overflow: hidden;. – Paraglider

This doesn't work in IE 11. Just stacks the tab tabnav. – Schonfield

Answer 2

i solved this using:

.nav.nav-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
}

example: https://codepen.io/r3l4x/pen/mdpdMLQ

note sure about cross browser stuff, so may not be a good answer.

Overset

Answer 3

I created a horizontal scroll-able tab bar using Navs.

You can check the working demo of the below code here.

CSS

 .nav {
  overflow-x: auto;
  overflow-y: hidden;
  height: 115px;
}

.nav-item {
  cursor: pointer;
  margin: 15px 10px;
  width: 200px;
  height: 70px;
  box-shadow: 0 4px 6px -6px #222;
}

.nav-link {
  font-size: 14px;
  text-align: center;
}

.nav-item.selected {
  color: #fff;
  background-color: #007bff;
}

HTML

<div class="card">
  <div class="card-body">
    <ul class="nav flex-column nav-pills">
      <li class="nav-item selected">
        <span class="nav-link">HTML </span>
      </li>
      <li class="nav-item">
        <span class="nav-link">CSS</span>
      </li>
      <li class="nav-item">
        <span class="nav-link">JS</span>
      </li>
      <li class="nav-item">
        <span class="nav-link">React</span>
      </li>
      <li class="nav-item">
        <span class="nav-link">Angular</span>
      </li>
      <li class="nav-item">
        <span class="nav-link">Vue</span>
      </li>
      <li class="nav-item">
        <span class="nav-link">Bootstrap</span>
      </li>
      <li class="nav-item">
        <span class="nav-link">Tailwind</span>
      </li>
      <li class="nav-item">
        <span class="nav-link">Codepen</span>
      </li>
    </ul>
  </div>
</div>

Bessiebessy

Answer 4

.nav-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    display: -webkit-box;
    display: -moz-box;
  }
  .nav-tabs>li {
    float: none;
  }

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="teste.css">
   <title>Document</title>
</head>
<body>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

   <div class="container">
   <div class="col-md-4">
      <div class="tabbable">
         <ul class="nav nav-tabs">
            <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
            <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
            <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
            <li><a href="#tab4" data-toggle="tab">Section 4</a></li>
            <li><a href="#tab5" data-toggle="tab">Section 5</a></li>
         </ul>
         <div class="tab-content">
            <div class="tab-pane active" id="tab1">
               <p>I'm in Section 1.</p>
            </div>
            <div class="tab-pane" id="tab2">
               <p>I'm in Section 2.</p>
            </div>
            <div class="tab-pane" id="tab3">
               <p>I'm in Section 3.</p>
            </div>
            <div class="tab-pane" id="tab4">
               <p>I'm in Section 4.</p>
            </div>
            <div class="tab-pane" id="tab5">
               <p>I'm in Section 5.</p>
            </div>
         </div>
      </div>
   </div>
   </div>
</body>
</html>

Kilmarnock

Provide some explanation to your answer as well – Kneel

Answer 5

Bootstrap 5 tab horizontal scroll for many items with pure javascript

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
   <meta charset="utf-8">
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
   <title>Bootstrap 5 tab horizontal scroll for many item</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
   <style>
      .tab-scroller{
         position: relative;
         max-width: 100%;
         overflow: hidden;
      }
      .tab-scroller-arrow{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 25px;
        cursor: pointer;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ffffff;
        border: 1px solid #222222;
      }
      .tab-scroller .right-arrow{
         right: 0;
      }
      .tab-scroller .left-arrow{
         left: 0;
      }
      .tab-scroller .left-arrow.d-none~.nav{
         padding-left: 0;
      }
      .tab-scroller .nav{
         position: relative;
         padding-left: 35px;
         flex-wrap: nowrap;
      }
   </style>
</head>
<div class="tab-scroller" >
   <i class="tab-scroller-arrow left-arrow d-none">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
      <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
    </svg>
   </i>
   <i class="tab-scroller-arrow right-arrow d-none">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
         <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
       </svg>
   </i>
   <ul class="nav nav-pills" id="pills-tab" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button>
      </li>
    </ul>
</div>
 <div class="tab-content" id="pills-tabContent">
   <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">Tab 1</div>
   <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">Tab 2</div>
   <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">Tab 3</div>
   <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">Tab 4</div>
 </div>



   <!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
   <!-- Custom js -->
  <script>
    document.addEventListener("DOMContentLoaded", function(){
//  selector
document.querySelectorAll(".tab-scroller").forEach((el) => {
      let scrollTabInner = el.querySelector(".nav")
      let scrollTabItem = el.querySelectorAll(".nav-item")
      let leftArrow = el.querySelector(".left-arrow")
      let rightArrow = el.querySelector(".right-arrow")
      //scrollable tab width
      let scrollTabWidth = el.offsetWidth

      //all tab items width
      let scrollTabItemsWidth = () => {
        let itemsWidth = 0;
        scrollTabItem.forEach(el => {
          let itemWidth = el.offsetWidth;
          itemsWidth += itemWidth;
        });
        return itemsWidth
      }

      //hidden tab item width
      let widthOfHiddenItems = scrollTabItemsWidth() - scrollTabWidth;
      let rightValue = 0;
      if (scrollTabItemsWidth() > scrollTabWidth) {
        rightArrow.classList.remove("d-none")
      }

      //right arrow click functionality
      rightArrow.addEventListener("click", () => {
        if (rightValue > widthOfHiddenItems) {
          rightArrow.classList.add("d-none")
          leftArrow.classList.remove("d-none")
          scrollTabInner.style.cssText = `right: ${widthOfHiddenItems + 35}px;`
        } else {
          rightArrow.classList.remove("d-none")
          leftArrow.classList.remove("d-none")
          rightValue += 200;
          scrollTabInner.style.cssText = `right: ${rightValue}px;`
        }
      })

      //left arrow click functionality
      leftArrow.addEventListener("click", () => {
        rightValue -= 200;
        scrollTabInner.style.cssText = `right: ${rightValue}px;`
        rightArrow.classList.remove("d-none")
        if (rightValue <= 0) {
          leftArrow.classList.add("d-none")
          rightArrow.classList.remove("d-none")
          scrollTabInner.style.cssText = `right: 0px;`
        }
      })
    })
     })
  </script>
</body>
</html>

Shedevil