CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-designbootstrap-5
Miroslav Popov
Miroslav Popov

Reputation: 3383

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

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 class="container-fluid">
  <div class="card-group">
    <div class="card">
      ...
    </div>
    <div class="card">
      ...
    </div>
    <div class="card">
      ...
    </div>
    <div class="card d-none d-md-block">
      ...
    </div>
    <div class="card d-none d-lg-block">
      ...
    </div>
    <div class="card d-none d-xl-block">
      ...
    </div>
  </div>
</div>

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

Upvotes: 1

Views: 423

Answers (1)

Kameron
Kameron

Reputation: 10846

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 class="container-fluid">
  <div class="card-group d-flex">
    <div class="card">
      ...
    </div>
    <div class="card">
      ...
    </div>
    <div class="card">
      ...
    </div>
    <div class="card d-none d-md-block">
      ...
    </div>
    <div class="card d-none d-lg-block">
      ...
    </div>
    <div class="card d-none d-xl-block">
      ...
    </div>
  </div>
</div>

Upvotes: 1

Related Questions