Bootstrap 4 row: scroll left-right when screen width < 700px

Question

I am using Boostrap 4 row

<div class="row">
   <div class="card"></div>
   <div class="card"></div>
   <div class="card"></div>
</div>

I would like to make it 'left-right scrollable' on mobile, as "responsive-table" would do for tables.

Here is a schema to explain it more clearly enter image description here

this is not available in bootstrap, you have to code this functionality yourself. — cloned, Jul 16 '19 at 14:42
Looks like you've asked this before? https://stackoverflow.com/questions/56967619/bootstrap-4-card-deck-scroll-left-right-on-mobile .. Also cards don't go inside row, columns do. — Carol Skelly, Jul 16 '19 at 14:46

Carol Skelly · Accepted Answer · 2021-04-21T14:38:07.867

1

Simplest way is to put the cards in columns and set a min/max width on the columns. Use flex-nowrap on the row to prevent wrapping.

.col {
    min-width: 250px;
    max-width: 300px;
}

edited Apr 21 '21 at 14:38

answered Jul 16 '19 at 14:54

Carol Skelly

1 Answers1