From e70f7162ece502a0ff683bc6100fcae5613caaad Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 11 May 2016 23:13:52 -0700 Subject: [PATCH] Fix #17511 by adding mention to the docs for how to extend the card columns --- docs/components/card.md | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/docs/components/card.md b/docs/components/card.md index 86c555abb3..992f4a138e 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -508,7 +508,7 @@ Only applies to small devices and above. ## Columns -Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. Cards are ordered from top to bottom and left to right when wrapped in `.card-columns`. +Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. Cards are ordered from top to bottom and left to right when wrapped in `.card-columns`. Only applies to small devices and above. @@ -576,3 +576,16 @@ Only applies to small devices and above. {% endexample %} + +Card columns can also be extended and customized with some additional code. Shown below is an extension of the `.card-columns` class using the same CSS we use—CSS columns— to generate a set of responsive tiers for changing the number of columns. + +{% highlight scss %} +.card-columns { + @include media-breakpoint-only(lg) { + column-count: 4; + } + @include media-breakpoint-only(xl) { + column-count: 5; + } +} +{% endhighlight %} -- 2.47.2