Horizontal scroll tabs for bootstrap row
<p>What I currently have is a row that uses the overflow property in <code>col-xs-2</code>'s CSS to contain a horizontal scrollable box to display elements:</p>

<p>HTML</p>

<pre><code>&lt;div class="container"&gt;
  &lt;c:if test="${!empty form.dataBase}"&gt;  
    &lt;div class="row"&gt;
      &lt;div class="col-xs-2" style="margin-top:20px;"&gt;
            ...
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/c:if&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>.row {
  overflow-x: auto;
  white-space: nowrap;
}

@media (min-width: 320px) {
  .col-xs-2 {
    width: 102%;
    display: inline-block;
    float: none;
  }
}

@media (min-width: 768px) {
  .col-xs-2 {
    width: 35%;
    display: inline-block;
    float: none;
  }
}
</code></pre>

<p>What I want to add to this box are tabs that would scroll when the mouse hovers over them, similar to how a site like <a href="https://rads.stackoverflow.com/amzn/click/com/B00WMO9LT8" rel="nofollow noreferrer" rel="nofollow noreferrer">amazon</a> would show the "Customers Who Bought This Item Also Bought" tabs on the sides of the box, but instead of going to a new page, would advance the scroll with hover. How would I do this?</p>

<p>This is using bootstrap</p>