Horizontally Scrollable List of Cards in Bootstrap

Bootstrap 4 card horizontal Scroll issue?

The reason why your cards are getting smaller is because .card-group is displayed as flex and its card items' flex-grow is set to 1, which means they will take up equal widths:

Sample Image

To get what you want, you can define a custom class along with its default .card-group (so that you don't override the default card-group styles), set its overflow style as well as its children <card>'s flex-basis so that they have a default width. You will need to set card-group's wrapping style to no-wrap as well as the default is set up wrap.

CSS

@media (min-width: 576px) {
    .card-group.card-group-scroll {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .card-group.card-group-scroll > .card {
        flex-basis: 35%;
    }
}

Result

Sample Image

fiddle: http://jsfiddle.net/b2jw13go/1/

Horizontally scrolling cards with a sticky card

Add an overflow to the wrapper/container class (<div class="d-flex flex-row flex-nowrap bg-warning">).

.d-flex.flex-row.flex-nowrap.bg-warning {
    overflow: auto;
}

You can find other options here.

Horizontal scroll in bootstrap 4

For an approach to this, you will have to change the default behaviours of the Bootstrap classes. We will have to use flex-nowrap on the cards container for the smallest media screen and change the overflow-x style to auto. In summary, we will use the nexts main changes:

CSS

@media only screen and (max-width : 576px)
{
  .mobile-card-container > .row {
    overflow-x: auto;
  }
}

Note that I used max-width: 576px for compatibility with the currents Bootstrap Breakpoints.

HTML structure

<!-- Mobile Card Container -->
<div class="container-fluid mobile-card-container">
  <div class="row text-center flex-nowrap flex-sm-wrap">
    <!-- Cards will be here -->
  </div>
</div>

So, for XS screen devices, the flex-nowrap class will apply in conjunction with the previous defined style, approaching what you where searching for. On the others type of screens (SM, MD, LG) the default behaviour of Bootstrap classes will be keeped (Note the usage of flex-sm-wrap class).

To finish, you can check the next working example (play with the windows resize on the full screen mode):

@media only screen and (max-width : 576px){  .mobile-card-container > .row {    overflow-x: auto;  }}
.card-background {  background-color: #ffffff;  border-radius: 6px;  margin: 16px 5px;  height: 100px;  -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);  -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);  box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Mobile Card Container --><div class="container-fluid mobile-card-container">  <div class="row text-center flex-nowrap flex-sm-wrap">        <!-- Card 48 cuotas -->    <div class="col-10 card-background mx-sm-auto bg-danger">      Card content    </div>    <!-- /Card 48 cuotas -->          <!-- Card 36 cuotas-->    <div class="col-10 card-background mx-sm-auto bg-primary">      Card Content    </div>    <!-- /Card 36 cuotas -->          <!-- Card 24 cuotas -->    <div class="col-10 card-background mx-sm-auto bg-danger">      Card Content    </div>    <!-- /Card 24 cuotas -->        </div></div>

Bootstrap 4 horizontal scroll with card-group

First you need to add overflow-x for horizontal scroll,
then you should have a max-width that after it the scroll functionality appear and because it's text you should white-space no wrap to be in one line if it's no long text.

.card {overflow-x: scroll;white-space: nowrap;max-width: 150px;padding: 1rem;}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="row">      <div class="list">            <div class="card-group">                <div class="card" ng-repeat="">                   data components are here                </div>            </div>      </ul>   </div>