CODEWITHSUNDEEP
csssassbootstrap-4
simple
simple

Reputation: 2397

Bootstrap 4 increase card column count

Is it possible to increase bootstrap-4 card column count? https://plnkr.co/edit/oIapj1imlMQ1M4vo1O5R?p=preview

This only shows 3 columns pushed to the left with 3 remaining columns empty to the right. I am putting this sass after the bootstrap-4 default styles:

.card-columns {
  // sm
  @media (min-width: 576px) {
    column-count: 3;
  }
  // md
  @media (min-width: 768px) {
    column-count: 4;
  }
  // lg
  @media (min-width: 992px) {
    column-count: 5;
  }
  // xl
  @media (min-width: 1200px) {
    column-count: 6;
  }
}

All examples I see do not successfully increase the column count, even using sass. If you know how, would you post a plunker example proving it is possible?

Upvotes: 2

Views: 2742

Answers (1)

Rahul
Rahul

Reputation: 2071

This bootstrap solution is buggy. It's not bulletproof solution yet. You can read here.

Why not work if increase the default column-count: value;?

Because .card class contain the display: ***; and width: ***; property. You should write custom CSS for this column-count: issue. You need to read this article. And Example is here.

My personal suggestion is avoid this css solution from production site. Hope this help.

Upvotes: 2

Related Questions