How to keep card-group from wrapping on small screens?-CodePudding

How to keep cards in a card-group attached next to each other on a smaller screen?

They are attached on lager screen, but separate on smaller screen. I'm hiding the extra cards on a smaller screen and prefer to use the first ones attached.

With this code the cards separate under 575px.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div >
  <div >
    <div >
      ...
    </div>
    <div >
      ...
    </div>
    <div >
      ...
    </div>
    <div >
      ...
    </div>
    <div >
      ...
    </div>
    <div >
      ...
    </div>
  </div>
</div>

How to keep showing the first three cards attached on small screen?

CodePudding user response：

card-group is losing it's display: flex; at 575px by default w/ Bootstrap. What you can do to is set the card-group to have a flex-display all the time either with CSS or inline Bootstrap classes. You can also look into using the grid-system w/ rows However, the parent, card-group will still lose flex at 575.

Just add d-flex as a class on your parent.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div >
  <div >
    <div >
      ...
    </div>
    <div >
      ...
    </div>
    <div >
      ...
    </div>
    <div >
      ...
    </div>
    <div >
      ...
    </div>
    <div >
      ...
    </div>
  </div>
</div>