CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-4bootstrap-4
MISC
MISC

Reputation: 121

Bootstrap 4 (Alpha 3): card columns - customized number of columns

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!

Upvotes: 2

Views: 3928

Answers (2)

Jeremy
Jeremy

Reputation: 582

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.

Upvotes: 4

Carol Skelly
Carol Skelly

Reputation: 362780

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

Upvotes: 1

Related Questions