v4/v5: Row columns for responsive card decks and more

Overview

Trying to find a new way to do responsive card decks while not locking ourselves into more card classes. My thinking here is we can easily control the column (.col) width by the parent with responsive .row-cols-* classes, but I don't know how many we need (have 0-5 now).

<!-- Three columns at the medium breakpoint and up -->
<div class="row row-cols-md-3">
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div> <!-- Wraps to new line here -->
  <div class="col">Column</div>
  <div class="col">Column</div>
</div>

/cc @twbs/css-review

How it works

We can add a default number of columns to support (thinking a max of 6). You can override this if you like, but otherwise we'll loop over it and generate the responsive classes.

Here's a simplified example with out the responsive infixes. See it in action via Sassmeister.

$row-columns: 6 !default;

@for $i from 1 through $row-columns {
  .row-cols-#{$i} > [class^="col"] {
    flex: 0 0 calc(100% / #{$i});
  }
}

Screenshots

Some screenshots to show how it's shaping up for grid columns and cards.

Preview: https://deploy-preview-29073--twbs-bootstrap.netlify.com/docs/4.3/components/card/#grid-cards

https://deploy-preview-29073--twbs-bootstrap.netlify.com/docs/4.3/layout/grid/#row-columns