Scrollable Tabs Separated

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<div class="container">

  <!-- Nav tabs -->
  <div class="nav-tabs-holder">
    <ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Sit Lorem Tellus</a></li>
      <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Consectetur Ornare</a></li>
      <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Ipsum Porta</a></li>
      <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Nibh Egestas Amet</a></li>
    </ul>
  </div>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active" id="home">
      <h2>Fusce Pharetra Ipsum</h2>
      <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur
        ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper.</p>
      <p>Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere
        erat a ante venenatis dapibus posuere velit aliquet.</p>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="profile">
      <h2>Etiam Quam</h2>
...

CSS

body {
  background-color: #e8eae9;
}

.container {
  padding-top: 30px;
}

.nav-tabs-holder {
  position: relative;
  margin-bottom: 5%;
}

.nav-tabs-holder:after {
  content: '';
  display: none;
  height: 45px;
  position: absolute;
  top: 0;
  right: 0;
  width: 45px;
  z-index: 1;
  background: rgba(232, 234, 233, 0);
  background: -moz-linear-gradient(left, rgba(232, 234, 233, 0) 0%, rgba(232, 234, 233, 1) 94%, rgba(232, 234, 233, 1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(232, 234, 233, 0)), color-stop(94%, rgba(232, 234, 233, 1)), color-stop(100%, rgba(232, 234, 233, 1)));
  background: -webkit-linear-gradient(left, rgba(232, 234, 233, 0) 0%, rgba(232, 234, 233, 1) 94%, rgba(232, 234, 233, 1) 100%);
  background: -o-linear-gradient(left, rgba(232, 234, 233, 0) 0%, rgba(232, 234, 233, 1) 94%, rgba(232, 234, 233, 1) 100%);
  background: -ms-linear-gradient(left, rgba(232, 234, 233, 0) 0%, rgba(232, 234, 233, 1) 94%, rgba(232, 234, 233, 1) 100%);
  background: linear-gradient(to right, rgba(232, 234, 233, 0) 0%, rgba(232, 234, 233, 1) 94%, rgba(232, 234, 233, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e8eae9', endColorstr='#e8eae9', GradientType=1);
}

@media screen and (max-width: 639px) {
  .nav-tabs-holder:after {
    display: block;
  }
}

.nav-tabs {
  font-size: 0;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: auto;
  background-color: #e8eae9;
  margin-bottom: 0;
  border: none;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

.nav-tabs > li {
  position: relative;
  font-size: 16px;
  margin: 0;
  margin-bottom: 0;
  display: inline-block;
  float: none;
}

.nav-tabs > li:last-child {
  margin-right: 45px;
}

.nav-tabs > li > a,
.nav-tabs > li > a:focus,
.nav-tabs > li > a:hover {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid transparent;
  background-color: #f1f1f1;
}

.nav-tabs > li > a {
  color: #86BC25;
  margin:...

JavaScript

// Scroll Wheel for Horizontal Scroll
$(".nav-tabs").mousewheel(function(event, delta) {
  this.scrollLeft -= (delta * 30);
  event.preventDefault();
});