More than 12 bootstrap columns with a horizontal scroll

Question

I am trying to make a table using bootstrap grid system. I know that we should use only 12 columns per row. But I wanted to have more than 12 columns with a horizontal scroll for the entire table. So I am trying with the following code snippet

<span class="col-md-2" style="text-align: center;"><b>Field 1</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 2</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 3</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 4</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 5</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 6</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 7</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 8</b></span>

I wanted to display 8 fields like as mentioned above in one line. But after field 6, other two fields are coming down. Is there any way to have all 8 fields in single line with horizontal scroll.

Answer 1

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>

2) Scroll

Increase the width of the main row, if you want to add horizontal scrolling:

@media (min-width: 992px) {
  .container-scroll {
    overflow-x: auto;
  }
  .container-scroll > .row {
    width: 133.33333333%; /* = 100% * 4/3 */
  }
}

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

<div class="container-fluid container-scroll">
  <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>

3) Various number of columns

If each row has various number of columns, but the number of columns is known in advance.

In this case the rows may be different by the width. Therefore, it is necessary to set the width of columns relative to the screen width, rather than the width of the row.

1. use vw instead of %
2. set special width for the row if it's wider then 100vw

@media (min-width: 992px) {
  .container-scroll {
    overflow-x: auto;
  }
  .container-scroll .columns-16 {
    width: 133.33333333vw;  /* = 100vw * 16/12 */
  }
  .container-scroll .columns-24 {
    width: 200vw;  /* = 100vw * 24/12 */
  }
  .container-scroll .col-md-2 {
    width: 16.66666667vw !important;
  }
}

.container-scroll > .row {
  margin-top: 24px;
}
.container-scroll > .row > .col-md-2 {
  font-weight: bold;
  text-align: center;
}

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

<div class="container-fluid container-scroll">
  <div class="row columns-16">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
    <div class="col-md-2">Field 5</div>
    <div class="col-md-2">Field 6</div>
    <div class="col-md-2">Field 7</div>
    <div class="col-md-2">Field 8</div>
  </div>
</div>
  
<div class="container-fluid container-scroll">
  <div class="row columns-24">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
    <div class="col-md-2">Field 5</div>
    <div class="col-md-2">Field 6</div>
    <div class="col-md-2">Field 7</div>
    <div class="col-md-2">Field 8</div>
    <div class="col-md-2">Field 9</div>
    <div class="col-md-2">Field 10</div>
    <div class="col-md-2">Field 11</div>
    <div class="col-md-2">Field 12</div>
  </div>
</div>
  
<div class="container-fluid container-scroll">
  <div class="row">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
  </div>
</div>

4) Unknown number of columns

Convert columns to inline-blocks, if you don't know the number of columns in a row.

@media (min-width: 992px) {
  .container-scroll > .row {
    overflow-x: auto;
    white-space: nowrap;
  }
  .container-scroll > .row > .col-md-2 {
    display: inline-block;
    float: none;
  }
}

.container-scroll > .row {
  margin-top: 24px;
}
.container-scroll > .row > .col-md-2 {
  font-weight: bold;
  text-align: center;
}

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

<div class="container-fluid container-scroll">
  <div class="row">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
    <div class="col-md-2">Field 5</div>
    <div class="col-md-2">Field 6</div>
    <div class="col-md-2">Field 7</div>
    <div class="col-md-2">Field 8</div>
  </div>

  <div class="row">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
    <div class="col-md-2">Field 5</div>
    <div class="col-md-2">Field 6</div>
    <div class="col-md-2">Field 7</div>
    <div class="col-md-2">Field 8</div>
    <div class="col-md-2">Field 9</div>
    <div class="col-md-2">Field 10</div>
    <div class="col-md-2">Field 11</div>
    <div class="col-md-2">Field 12</div>
  </div>

  <div class="row">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
  </div>
</div>

Answer 2

To get more columns:

You can make your own Bootstrap variation from here: http://getbootstrap.com/customize/ where you can set the number of columns the grid layout uses as well as pretty much any other customisation of the CSS before downloading, installing and then using this (new) template on your website.

Easy.

Or, if you fancy a challenge and you got a couple of hours to kill you can open up the Bootstrap.css file and manually add new CSS elements and realign the width [percentage] parameters for each column definition.

Horizontally scrolling tables

The whole premise of bootstrap is not to have anything overflow the screen, no matter what. If you specifically do want things to overflow then you either shouldn't be using bootstrap or you will need to manually tweak some settings in the CSS, again, I refer you back to http://getbootstrap.com/customize/ which might have a solution, otherwise you can explore the CSS and set some CSS parameters in the bootstrap template file.

There may well be a pre-defined bootstrap table css class you can use for such things, have you explored the Bootstrap documentation?

Or Searching other questions on Stack Overflow can give you some useful answers for doing this manually.