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.
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>