Bootstrap 4 Card Horizontal Scroll Issue?

i am using bootstrap card to create a basic image and text underneath.Decided to use card class since its a pretty good structure and didn't want to use too much css to make div li

Solution 1:

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:

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

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