title: Bootstrap 3 Horizontal scrollable row Website Design
body: <p>I am trying to make a horizontal scroll web page using bootstrap 3. <a href="http://fiddle.jshell.net/ravimallya/7kCTD/2/show/" rel="nofollow noreferrer">This</a> is what I have tried so far. </p>
  
  <pre><code>@media (min-width:768px) {
  .container {
  width:100%;
  }
  #main-content{
       min-height: 100%;
      height: auto; 
  
  }
  #main-content &gt; .row {
   overflow-x:scroll;
       overflow-y:hidden;
  }    
  #main-content &gt; .row [class*="col-lg"], #main-content &gt; .row [class*="col-md"], #main-content &gt; .row [class*="col-sm"] {
      float:left;
  }
  </code></pre>
  
  <p>I tried with the jquery method which mentioned in <a href="https://stackoverflow.com/questions/19800008/create-horizontally-scrolling-list-item-view-using-bootstrap-columns">this</a> thread but it is not scrolling even after the width has been set to <code>row</code> class, the <code>col-lg</code> classes as displayed <a href="http://fiddle.jshell.net/ravimallya/7kCTD/3/show/" rel="nofollow noreferrer">here</a>. </p>
  
  <p>I also tried to set height to <code>row</code> class by getting the height of <code>col-lg-</code> height, but still not <a href="http://fiddle.jshell.net/ravimallya/7kCTD/4/show/" rel="nofollow noreferrer">succeeded</a>.</p>
  
  <p>What I wanted to achieve is:</p>
  
  <blockquote>
    <ol>
    <li>col-lg-, col-md- and col-sm- classes should need to be scrolled with it's respective width content. the number of cols may vary according to the data.</li>
    <li>In col-xs, there is no change in the default behavior.</li>
    </ol>
  </blockquote>
  
  <p><a href="http://jsfiddle.net/ravimallya/7kCTD/3/" rel="nofollow noreferrer">http://jsfiddle.net/ravimallya/7kCTD/3/</a> this is the work place. Can anyone suggest a workaround? css, jquery </p>