Bootstrap 4 – Responsive cards in card-columns

by

Update 2019 – Bootstrap 4

You can simply use the SASS mixin to change the number of cards across in each breakpoint / grid tier.

.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;
  }
}

SASS Demo: http://www.codeply.com/go/FPBCQ7sOjX

Or, CSS only like this…

@media (min-width: 576px) {
    .card-columns {
        column-count: 2;
    }
}

@media (min-width: 768px) {
    .card-columns {
        column-count: 3;
    }
}

@media (min-width: 992px) {
    .card-columns {
        column-count: 4;
    }
}

@media (min-width: 1200px) {
    .card-columns {
        column-count: 5;
    }
}

CSS-only Demo: https://www.codeply.com/go/FIqYTyyWWZ

More Related Contents:

  1. Bootstrap row with columns of different height
  2. Bootstrap 4: Multilevel Dropdown Inside Navigation
  3. Animate/Shrink NavBar on scroll using Bootstrap
  4. One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
  5. How to center nav-items in Bootstrap? [duplicate]
  6. Create a responsive navbar sidebar “drawer” in Bootstrap?
  7. Bootstrap 4 Cards of same height in columns
  8. How to make Bootstrap 4 cards the same height in card-columns?
  9. Bootstrap – align button to the bottom of card
  10. Bootstrap 4 – Sticky footer – Dynamic footer height
  11. Align the form to the center in Bootstrap 4 [duplicate]
  12. Bootstrap navbar link color won’t change
  13. Empty vertical space between columns in Bootstrap 4
  14. Bootstrap navbar: nothing is displayed on smaller devices
  15. Why aren’t my bootstrap 4 columns the same height?
  16. CSS float-right not working in Bootstrap 4 Navbar [duplicate]
  17. How to make Bootstrap cards the same height in card-columns?
  18. My Website is Mirror-flipped on iPhone Devices
  19. How can I override Bootstrap CSS styles?
  20. Bootstrap full-width with 2 different backgrounds (and 2 columns)
  21. IE8 issue with Twitter Bootstrap 3
  22. Change Bootstrap tooltip color
  23. Bootstrap 3 collapsed menu doesn’t close on click
  24. Bootstrap print CSS removes background color
  25. Bootstrap 3: Push/pull columns only on smaller screen sizes
  26. How to center buttons in Twitter Bootstrap 3?
  27. Change color of bootstrap navbar on hover link?
  28. Bootstrap – Fill fluid container between header and footer
  29. Right align text within Bootstrap 4 breadcrumbs
  30. Bootstrap row and col explanation

Leave a Comment