Menu
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.
333
Bootstrap was made for a 12-col usage. If you want to have more columns, you need to define your custom responsive grid, with the help of Bootstrap Less variables (see here). You'll mainly need to change these variables : @grid-columns : Number of columns in the grid. @grid-gutter-width Padding between columns.
Column wrapping If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
Bootstrap uses a 12-column grid system that can update itself responsively based on screen size. There are only 38 highly composite numbers below the one million threshold, including 120, 2520, 5040, 55440 and 720720.
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>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>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.
vw instead of %
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>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>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.
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.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
