title: Horizontal scroll tabs for bootstrap row
body: <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>