Created by: MartijnCuppens
Mentioned before in https://github.com/twbs/bootstrap/issues/28891#issuecomment-500917538 and https://github.com/twbs/bootstrap/issues/28076#issuecomment-488386892, we should ditch the card columns in favor of masonry.
Main reasons are:
- Cards are ordered per column instead of per row (https://github.com/twbs/bootstrap/issues/17709, https://github.com/twbs/bootstrap/issues/17805, https://github.com/twbs/bootstrap/issues/17882)
- Several rendering issues (https://github.com/twbs/bootstrap/issues/19060, https://github.com/twbs/bootstrap/issues/19600, https://github.com/twbs/bootstrap/issues/19725, https://github.com/twbs/bootstrap/issues/20161, https://github.com/twbs/bootstrap/issues/28921)
- No control over responsive number of columns (https://github.com/twbs/bootstrap/issues/17511, https://github.com/twbs/bootstrap/issues/22136, https://github.com/twbs/bootstrap/issues/20321, https://github.com/twbs/bootstrap/issues/20905)
I've updated the docs and included Masonry via cdnjs, @XhmikosR is that ok for you, or do you have another proposal? (I also watched the releases of masonry github repo so I know when to upgrade)
Edit:
The demo is a example page now. It's also possible to add additional parameters (async & intergrity) to the extra js.
TODO:
-
Link to this PR in migration section -
Move documentation to examples -
Allow to pass asyncattribute -
Check if integrity attribute is present before printing
Closes #28076 (closed), closes #28439 (closed)
Card docs: https://deploy-preview-28922--twbs-bootstrap.netlify.com/docs/4.3/components/card/#card-columns-masonry-layout Example page: https://deploy-preview-28922--twbs-bootstrap.netlify.com/docs/4.3/examples/#integrations Demo: https://deploy-preview-28922--twbs-bootstrap.netlify.com/docs/4.3/examples/masonry/