Here is the task to make horizontally scrollable in a bootstrap row.
It can be done by the following approach:
Approach:
- Making all the div element in inline using display: inline-block; property
- Adding the scroll bar to all the div element using overflow-x: auto; property.
- white-space: nowrap; property is used make all div in a single line.
Example :
<!DOCTYPE html> < html lang = "en" >
< head >
< title >How to make horizontal
scrollable in a bootstrap row?</ title >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< style >
/* The heart of the matter */
.horizontal-scrollable > .row {
overflow-x: auto;
white-space: nowrap;
}
.horizontal-scrollable > .row > .col-xs-4 {
display: inline-block;
float: none;
}
/* Decorations */
.col-xs-4 {
color: white;
font-size: 24px;
padding-bottom: 20px;
padding-top: 18px;
}
.col-xs-4:nth-child(2n+1) {
background: green;
}
.col-xs-4:nth-child(2n+2) {
background: black;
}
</ style >
</ head >
< body >
< center >
< div class = "container" >
< h1 style = "text-align:center;color:green;" >
GeeksforGeeks
</ h1 >
< h3 >
To make horizontal scrollable in a bootstrap row?
</ h3 >
< div class = "container horizontal-scrollable" >
< 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 >
</ div >
</ div >
</ center >
</ body >
</ html >
|
Output: