From: Mark Otto Date: Thu, 12 May 2016 06:13:52 +0000 (-0700) Subject: Fix #17511 by adding mention to the docs for how to extend the card columns X-Git-Tag: v4.0.0-alpha.3~74^2^2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=e70f7162ece502a0ff683bc6100fcae5613caaad;p=thirdparty%2Fbootstrap.git Fix #17511 by adding mention to the docs for how to extend the card columns --- 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 %}