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 scrol

Answer 1

Four tricks with the Bootstrap grid

1) 8 columns

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

  

    

      

        
Field 1
        
Field 2
      
    
    

      

        
Field 3
        
Field 4
      
    
    

      

        
Field 5
        
Field 6
      
    
    

      

        
Field 7
        
Field 8
      
    
  

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 */
  }
}

  

    

      

        
Field 1
        
Field 2
      
    
    

      

        
Field 3
        
Field 4
      
    
    

      

        
Field 5
        
Field 6
      
    
    

      

        
Field 7
        
Field 8
      
    
  

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;
}

  

    
Field 1
    
Field 2
    
Field 3
    
Field 4
    
Field 5
    
Field 6
    
Field 7
    
Field 8
  

  

  

    
Field 1
    
Field 2
    
Field 3
    
Field 4
    
Field 5
    
Field 6
    
Field 7
    
Field 8
    
Field 9
    
Field 10
    
Field 11
    
Field 12
  

  

  

    
Field 1
    
Field 2
    
Field 3
    
Field 4
  

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;
}

  

    
Field 1
    
Field 2
    
Field 3
    
Field 4
    
Field 5
    
Field 6
    
Field 7
    
Field 8
  

  

    
Field 1
    
Field 2
    
Field 3
    
Field 4
    
Field 5
    
Field 6
    
Field 7
    
Field 8
    
Field 9
    
Field 10
    
Field 11
    
Field 12
  

  

    
Field 1
    
Field 2
    
Field 3
    
Field 4