[css] Bootstrap 4 card-deck with number of columns based on viewport

Updated 2018

If you want a responsive card-deck, use the visibility utils to force a wrap every X columns on different viewport width(breakpoints)...

Bootstrap 4 responsive card-deck (v 4.1)


Original answer for Bootstrap 4 alpha 2:

You can use the grid col-*-* to get the different widths (instead of card-deck) and then set equal height to the cols using flexbox.

.row > div[class*='col-'] {
  display: flex;
  flex:1 0 auto;
}

http://codeply.com/go/O0KdSG2YX2 (alpha 2)

The problem is that w/o flexbox enabled the card-deck uses table-cell where it becomes very hard to control the width. As of Bootstrap 4 Alpha 6, flexbox is default so the additional CSS is not required for flexbox, and the h-100 class can be used to make the cards full height: http://www.codeply.com/go/gnOzxd4Spk


Related question: Bootstrap 4 - Responsive cards in card-columns

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to twitter-bootstrap

Bootstrap 4: responsive sidebar menu to top navbar CSS class for pointer cursor How to install popper.js with Bootstrap 4? Change arrow colors in Bootstraps carousel Search input with an icon Bootstrap 4 bootstrap 4 responsive utilities visible / hidden xs sm lg not working bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js Bootstrap 4 - Inline List? Bootstrap 4, how to make a col have a height of 100%? Bootstrap 4: Multilevel Dropdown Inside Navigation

Examples related to twitter-bootstrap-4

bootstrap 4 responsive utilities visible / hidden xs sm lg not working Bootstrap 4, how to make a col have a height of 100%? Align the form to the center in Bootstrap 4 How to hide collapsible Bootstrap 4 navbar on click `col-xs-*` not working in Bootstrap 4 What is class="mb-0" in Bootstrap 4? Does bootstrap 4 have a built in horizontal divider? What is the '.well' equivalent class in Bootstrap 4 Bootstrap 4 card-deck with number of columns based on viewport

Examples related to bootstrap-4

Bootstrap 4 multiselect dropdown react button onClick redirect page bootstrap 4 file input doesn't show the file name How to use Bootstrap 4 in ASP.NET Core Bootstrap 4: responsive sidebar menu to top navbar CSS class for pointer cursor Change arrow colors in Bootstraps carousel Bootstrap 4 Dropdown Menu not working? Search input with an icon Bootstrap 4 How to import popper.js?