Create horizontally scrolling List Item view using Bootstrap Columns

I managed to get it working using almost stock Twitter Bootstrap:

Fiddle: http://jsfiddle.net/V5zWT/12/

I used an unordered list with the list-inline class. By default this will still wrap when it reaches the edge of the container, so I tweaked the list-inline class.

.list-inline {  white-space:nowrap;}<div class="DocumentList">    <ul class="list-inline">        <li class="DocumentItem">            <span>Test Data1</span>        </li>        <li class="DocumentItem">            <span>Test Data1</span>        </li>        <li class="DocumentItem">            <span>Test Data1</span>        </li>        <li class="DocumentItem">            <span>Test Data1</span>        </li>        <li class="DocumentItem">            <span>Test Data1</span>        </li>        <li class="DocumentItem">            <span>Test Data1</span>        </li>        <li class="DocumentItem">            <span>Test Data1</span>        </li>        <li class="DocumentItem">            <span>Test Data1</span>        </li>        <li class="DocumentItem">            <span>Test Data1</span>        </li>    </ul></div>

To allow horizontal scrolling check this github link

Download and include bootstrap-horizon.css after bootstrap.css. as

<link rel="stylesheet" href="css/bootstrap.min.css"/><link rel="stylesheet" href="css/bootstrap-horizon.css">

Sample code

div class="row row-horizon">  <div class="col-md-6">    <h1>Test</h1>  </div>  <div class="col-md-6">    <h1>Test</h1>  </div>  <div class="col-md-6">    <h1>Test</h1>  </div>  <div class="col-md-6">    <h1>Test</h1>  </div></div>`

it works for me.

Maybe this will help you:

FIDDLE

If the .DocumentItem width is fixed you can count the width of scroll element and set it dynamically.

<script type="text/javascript">    var totalWidth = $('.DocumentItem').length * $('.DocumentItem').width();    $('.row').css('width', totalWidth + 'px');</script>