After successfully creating a small mosaic using Bootstrap 3, I attempted to reuse it on a site with Bootstrap 4 only to encounter a frustrating issue. The mosaic that once worked perfectly is now broken and not displaying correctly. You can see the working mosaic here and the broken mosaic here.
Below is the HTML code for the mosaic:
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-6 B"></div>
<div class="col-md-4 col-lg-3 G"></div>
<div class="col-md-4 col-lg-3 G"></div>
<div class="col-md-12 col-lg-6 O"></div>
</div>
</div>
And here is the CSS code used:
.row > div {border:10px solid white}
.B {background:blue; height:200px}
.G {background:green; height:100px}
.O {background:orange; height:100px}
I'm trying to figure out what went wrong during the transition from Bootstrap 3 to Bootstrap 4. Is there a solution to fix this without having to use JavaScript? Any help or insights would be greatly appreciated!
Thank you in advance!