I use the following HTML code:
<div id="list">
<div class="row">
<div class="col-md-3">1</div>
<div class="col-md-3">2</div>
<div class="col-md-3">3</div>
<div class="col-md-3">n-times</div>
</div>
</div>
So, I need to display one row with infinity columns by horizontal with scrolling in the bottom of page.
How can I do this?
So, I tried to set fixed width
for list
container and have set overflow-x: auto
Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line. Here the scroll div will be horizontally scrollable.
Scroll horizontally using a keyboard and mousePress and hold SHIFT. Scroll up or down using your mouse wheel (or another vertical scrolling function of your mouse).
A horizontal scroll bar enables the user to scroll the content of a window to the left or right. A vertical scroll bar enables the user to scroll the content up or down.
Add data-spy="scroll" to the element that should be used as the scrollable area (often this is the <body> element). Then add the data-target attribute with a value of the id or the class name of the navigation bar ( . navbar ). This is to make sure that the navbar is connected with the scrollable area.
It's okay to exceed 12 column units in a row. It causes the columns to wrap, but you can override the wrapping with flexbox.
Bootstrap 4 uses flexbox, and the utility classes to get a horizontal scrolling layout..
<div class="container-fluid">
<div class="row flex-row flex-nowrap">
<div class="col-3">
..
</div>
<div class="col-3">
..
</div>
<div class="col-3">
..
</div>
<div class="col-3">
..
</div>
<div class="col-3">
..
</div>
<div class="col-3">
..
</div>
<div class="col-3">
..
</div>
<div class="col-3">
..
</div>
</div>
</div>
Bootstrap 4 Demo: http://codeply.com/go/GoFQqQAFhN
Also see: Horizontally scrollable list of cards in Bootstrap
For Bootstrap 3, it would be done with some CSS for the flexbox.. .
row > .col-xs-3 {
display:flex;
flex: 0 0 25%;
max-width: 25%
}
.flex-nowrap {
-webkit-flex-wrap: nowrap!important;
-ms-flex-wrap: nowrap!important;
flex-wrap: nowrap!important;
}
.flex-row {
display:flex;
-webkit-box-orient: horizontal!important;
-webkit-box-direction: normal!important;
-webkit-flex-direction: row!important;
-ms-flex-direction: row!important;
flex-direction: row!important;
}
Bootstrap 3 Demo: http://codeply.com/go/P13J3LuBIM
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