2

I use in Bootstrap 4 (Alpha 3) Card Colums and try to customize the number of colums. There is the following example in the Docs:

.card-columns {
      @include media-breakpoint-only(lg) {
        column-count: 4;
      }
      @include media-breakpoint-only(xl) {
        column-count: 5;
      }
    }

As the default column-count is 3 (except for sm devices), I try to reduce the default to 2 columns, using the following code in an additional CSS file (after Bootstrap CSS):

.card-columns {
  @include media-breakpoint-only(sm) {
    column-count: 2;
  }
  @include media-breakpoint-only(md) {
    column-count: 2;
  }
  @include media-breakpoint-only(lg) {
    column-count: 2;
  }
  @include media-breakpoint-only(xl) {
    column-count: 2;
  }
}

But, unfortunately, the result is still 3 columns. What am I doing wrong?

Thank you very much for your help!

danopz
  • 3,310
  • 5
  • 31
  • 42
MISC
  • 121
  • 1
  • 3
  • With SASS enabled it works: http://codeply.com/go/nHZg5n2vuE – Carol Skelly Aug 18 '16 at 11:26
  • Thank you. No I need to find out how to enable SASS ... (the related docs [http://v4-alpha.getbootstrap.com/getting-started/best-practices/] seems not to be ready yet). – MISC Aug 18 '16 at 13:25
  • Possible duplicate of [Bootstrap 4 - Responsive cards in card-columns](https://stackoverflow.com/questions/34140793/bootstrap-4-responsive-cards-in-card-columns) – pgmank Aug 20 '19 at 21:07

2 Answers2

4

You need to use the @media CSS tag. Use the CSS code below in the site's CSS file and you should be good to go.

@media (min-width: 576px) and (max-width: 768px)
{
    .card-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

The "column-count" properties is all you need to change.

You can change the min-width and max-width to any of bootstraps grid options to get the desired results. See Bootstraps Grid Options for referance.

Jeremy
  • 542
  • 1
  • 5
  • 14
1

You can use SASS to change the media-breakpoint-only..

.card-columns {
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(md) {
    column-count: 3;
  }
  @include media-breakpoint-only(sm) {
    column-count: 2;
  }
}

Working demo: http://codeply.com/go/nHZg5n2vuE

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624