35 merge requests!28721Hot test,!27561Adds font-weight-medium to font weight classes,!26437merge,!26197V4 dev xmr,!20778V4 dev,!20539Allow multiple modals,!18988Blockquote border width,!20854Fixes 15534,!19272V4 dev xmr grunt html,!19581V4 fix popover,!20493V4 dev display,!20636Fix docs for heading sizes,!19824blockquote-center,!22547Finished a new translation for bootstrap,!19534Docs 17264,!18704Extend form docs with example form errors,!19533Npm deps,!22143Fix selectable disabled toggle radio buttons,!19084V4 rhythm,!22598test,!18501Document .card-*-outline variants,!18829Add prefix to carousel classes,!18864Feature/navbar toggler support color schemes,!19602V4 palettes arun,!19448New pull request for testing,!19358XXL grid size,!19825.blockquote-center,!25326Adjust examples,!23995Add back cursor: pointer for .btn-link,!23178Spinner,!19754Issue template,!19753Card img overlay padding,!19747Blockquote border width,!19580ExitStars,!17021v4
@@ -312,6 +312,61 @@ Cards include their own variant classes for quickly changing the `background-col
</div>
{% endexample %}
## Outline variants
In need of a colored card, but not the hefty background colors they bring? Replace the default modifier classes with the `.card-*-outline` ones to style just the `border-color` of a card.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <citetitle="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
{% endexample %}
## Groups
Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups use `display: table;` and `table-layout: fixed;` to achieve their uniform sizing. However, enabling [flexbox mode]({{ site.baseurl }}/getting-started/flexbox) can switch that to use `display: flex;` and provide the same effect.