search

desandro / masonry

:love_hotel: Cascading grid layout plugin
https://masonry.desandro.com
16.41k stars 2.11k forks source link

Issues with bootstrap 4 #1063

Open raj-uimatic opened 6 years ago

raj-uimatic commented 6 years ago

Test case : https://codepen.io/raj-uimatic/pen/JBpMab

Layout breaks when upgrading bootstrap from V3 to V4

Forked from https://codepen.io/desandro/pen/eJJEXd

Bootstrap demo provided on : https://masonry.desandro.com/extras.html#bootstrap

desandro commented 6 years ago

Bootstrap v4 has an all new grid layout system that uses flexbox. I'll look into revising the Bootstrap demo

g-arais commented 6 years ago

Hi any fix for Bootstrap 4?

dertuerke commented 6 years ago

+1

theRod15 commented 6 years ago

Im using bootstrap 4.1.3. For me everything works quite fine. I have the masonry grid html div tag nested in the bootstrap grid..No layout crashes at all...

jannndo commented 6 years ago

@TheRod1990 hi, can you please provide a snippet? because i'm having trouble to use masonry grid system with bootstrap 4. Same problem as @raj-uimatic . Thanks

CloverFeywilde commented 6 years ago

Second. I can't get this to work at all with bootstrap 4. Can we please get some assistance? This is a pretty big issue.

poebrand commented 6 years ago

Looks like a great tool! Would also appreciate the demos being upgraded to Bootstrap 4.

helmutgranda commented 6 years ago

There is a fundamental issue with the test case. Accordingy to the documentation on Bootstrap 4 there is no such thing as col-xs, if you want to target devices starting from xs you need to remove the xs declaration and it becomes col-.

image

I have updated the demo from Bootstrap3 to Bootstrap 4 and it works just as expected:

https://codepen.io/helmutgranda/pen/Pyjeqd