How to make vertical scrollable rows in bootstrap?
Here is the task to make vertically scrollable in a bootstrap row.
It can be done by the following approach:
Approach:
- Making all the div element in next line using position: absolute; property (arrange all div column-wise).
- Adding the scroll bar to all the div element using overflow-y: scroll; property.
Example:
<!DOCTYPE html> < html lang = "en" > < head > < title >How to make vertical 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 > .vertical-scrollable> .row { position: absolute; top: 120px; bottom: 100px; left: 180px; width: 50%; overflow-y: scroll; } .col-sm-8 { color: white; font-size: 24px; padding-bottom: 20px; padding-top: 18px; } .col-sm-8:nth-child(2n+1) { background: green; } .col-sm-8: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 vertical scrollable in a bootstrap row? </ h3 > < div class = "container vertical-scrollable" > < div class = "row text-center" > < div class = "col-sm-8" > 1</ div > < div class = "col-sm-8" > 2</ div > < div class = "col-sm-8" > 3</ div > < div class = "col-sm-8" > 4</ div > < div class = "col-sm-8" > 5</ div > < div class = "col-sm-8" > 6</ div > < div class = "col-sm-8" > 7</ div > </ div > </ div > </ div > </ center > </ body > </ html > |
Output:
Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.