CardColumns renders a single column

[rkgallaway]

The Bug

Result

v2.0.0-beta.4 (using Bootstrap 5.0.2) renders a single column. 20 cards were present, all in one column and regardless of card width. neither mention of change in documentation, nor property(s) necessary to achieve multiple columns. Docs do show an example of a single column, implying a change to CardColumn (singular column) functionality, which if intentional warrants a Component rename and I propose a multiple-column CardColumns option.

Expectation

v1.6.1 (Bootstrap 4.6.0) renders 3 columns by default (possibility: card width possibly a factor for column number). 20 cards were also present, divided between the three columns. Documentation does show an example of 3 columns.

To Reproduce

Steps to reproduce the behavior:

1. Go to this sandbox
2. view results
3. notice bootstrap version "5.0.2"
4. See error
5. change bootstrap version to "4.6.0"
6. See three columns as expected

Screenshots

not working:

working:

Environment

• Operating System: [Catalina Version 10.15.7]
• Browser, Version [Version 91.0.4472.114 (Official Build) (x86_64)]
• React-Bootstrap Version [v2.0.0-beta.4]
• have reproduced same results with BigSur and WIndows 10 on student machines (unsure of all version specifics)

[kyletsang]

Looks like this was removed upstream in favor of a 3rd party component:
twbs/bootstrap#28922
https://getbootstrap.com/docs/5.0/components/card/#masonry

We should remove this component and related docs.

[Durai46]

@kyletsang is this issue has still open?

[kyletsang]

@Durai46 yes, feel free to take it. Thanks

[ryansrofe]

Fwiw, the recommended approach to use Masonry does not work out of the box with react. Columns are equal in height to the largest card in the row. See attached. The component should be removed from docs for sure because it was removed from bootstrap but I'm wondering what the alternative is for react-bootstrap users?