Create Horizontally Scrolling List Item View Using Bootstrap Columns

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>

More than 12 bootstrap columns with a horizontal scroll

Four tricks with the Bootstrap grid

1) 8 columns

You can use nested grids. Without any tables or customizations. For example:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container-fluid">

  <div class="row">

    <div class="col-md-3">

      <div class="row text-center">

        <div class="col-md-6"><b>Field 1</b></div>

        <div class="col-md-6"><b>Field 2</b></div>

      </div>

    </div>

    <div class="col-md-3">

      <div class="row text-center">

        <div class="col-md-6"><b>Field 3</b></div>

        <div class="col-md-6"><b>Field 4</b></div>

      </div>

    </div>

    <div class="col-md-3">

      <div class="row text-center">

        <div class="col-md-6"><b>Field 5</b></div>

        <div class="col-md-6"><b>Field 6</b></div>

      </div>

    </div>

    <div class="col-md-3">

      <div class="row text-center">

        <div class="col-md-6"><b>Field 7</b></div>

        <div class="col-md-6"><b>Field 8</b></div>

      </div>

    </div>

  </div>

</div>

Horizontal scrollable div's in a bootstrap row

Please check. Is it what you want to achieve?

horizontal scrolling

CodePen •
JSFiddle

/* The heart of the matter */
.testimonial-group > .row {
  overflow-x: auto;
  white-space: nowrap;
}
.testimonial-group > .row > .col-xs-4 {
  display: inline-block;
  float: none;
}

/* Decorations */
.col-xs-4 { color: #fff; font-size: 48px; padding-bottom: 20px; padding-top: 18px; }
.col-xs-4:nth-child(3n+1) { background: #c69; }
.col-xs-4:nth-child(3n+2) { background: #9c6; }
.col-xs-4:nth-child(3n+3) { background: #69c; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container testimonial-group">
  <div class="row text-center">
    <div class="col-xs-4">1</div><!--
 --><div class="col-xs-4">2</div><!--
 --><div class="col-xs-4">3</div><!--
 --><div class="col-xs-4">4</div><!--
 --><div class="col-xs-4">5</div><!--
 --><div class="col-xs-4">6</div><!--
 --><div class="col-xs-4">7</div><!--
 --><div class="col-xs-4">8</div><!--
 --><div class="col-xs-4">9</div>
  </div>
</div>

Bootstrap columns cause horizontal scrollbar

Horizontal scrollbars are usually caused by using the Bootstrap grid incorrectly.

The solution proposed by Ben Goossens is a hack and should be avoided because it makes the use of Bootstrap pointless. Use Bootstrap as intended and you won't need any hacks or custom css gymnastics.

Here's what you need:

1) .container div

2) .row div

3) .col div

That's the "holy trinity" you need in order for the Bootstrap grid to work properly.

Always put all of your normal content into Bootstrap columns (which in turn go into a row, which goes into a container) and you won't have any horizontal scrollbar issues.

The Bootstrap rows are designed to work with columns together. If you leave one of those 2 out, you're gonna run into issues.

Bootstrap row with horizontal scroll

row-fluid need the style attribute " white-space: nowrap; " and the divs inside need the style attribute " display: inline-block; "

.row-fluid{
     white-space: nowrap;
}
.row-fluid .col-lg-3{
     display: inline-block;
}

try it

Boostrap 4 container, row, col with horizontal scrolling

Probably what you're looking for is to stop the columns from wrapping, there was a similar question here

Basically use a row with the class .flex-nowrap

I do agree with @cloned from the comment - to show data in a table format there is absolutely nothing wrong with using a table tag, bootstrap also helps you out with those: table documentation from bootstrap

Bootstrap horizontal scrolling

It's okay to exceed 12 column units in a row. It causes the columns to wrap, but you can override the wrapping with flexbox.

Bootstrap 4 uses flexbox, and the utility classes to get a horizontal scrolling layout..

<div class="container-fluid">
    <div class="row flex-row flex-nowrap">
        <div class="col-3">
           ..
        </div>
        <div class="col-3">
           ..
        </div>
        <div class="col-3">
           ..
        </div>
        <div class="col-3">
           ..
        </div>
        <div class="col-3">
           ..
        </div>
        <div class="col-3">
           ..
        </div>
        <div class="col-3">
           ..
        </div>
        <div class="col-3">
           ..
        </div>
    </div>
</div>

Bootstrap 4 Demo: http://codeply.com/go/GoFQqQAFhN

Also see: Horizontally scrollable list of cards in Bootstrap

For Bootstrap 3, it would be done with some CSS for the flexbox..
.

row > .col-xs-3 {
    display:flex;
    flex: 0 0 25%;
    max-width: 25%
}

.flex-nowrap {
    -webkit-flex-wrap: nowrap!important;
    -ms-flex-wrap: nowrap!important;
    flex-wrap: nowrap!important;
}
.flex-row {
    display:flex;
    -webkit-box-orient: horizontal!important;
    -webkit-box-direction: normal!important;
    -webkit-flex-direction: row!important;
    -ms-flex-direction: row!important;
    flex-direction: row!important;
}

Bootstrap 3 Demo: http://codeply.com/go/P13J3LuBIM

Bootstrap 3 Horizontal scrollable row Website Design

Finally, I was able to get what I wanted through a CSS-only method.

@media (min-width:768px) {
  .container{
    width:100%;
  }
  #main-content{
    min-height: 100%;
    height: auto;
  }
  #main-content > .row {
    overflow-x:scroll;
    overflow-y:hidden;
    white-space:nowrap;
  }
  #main-content > .row [class*="col-lg"], #main-content > .row [class*="col-md"], #main-content > .row [class*="col-sm"] {
    float:none;
    display:inline-block;
    white-space:normal;
    vertical-align:top;
  }
}

Added float:none and display:inline-block to col- classes to get it to work.

You can see the working example here. I added niceScroll() to get the perfect look. Edit is here.

Create Horizontally Scrolling List Item View Using Bootstrap Columns