diff options
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/card.md | 15 |
1 files changed, 14 insertions, 1 deletions
diff --git a/docs/components/card.md b/docs/components/card.md index 86c555abb..992f4a138 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. </div> </div> {% 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 %} |