Using Umbraco 7.8.1, Bootstrap 4.0.0 and a two column grid layout the columns did not sit side by side but rather on top of each other. I searched the Internet on this and found nothing. Setting the Bootstrap version back to 3.3.7 fixed this issue immediately. I then uncommented all my commented out CSS done while debugging and the template now works quite well with the exception of the differences between version 3.3.7 and 4.0.0. Therefore, since it doesn't seem to be an issue with my other included CSS files such as a rogue margin or padding setting I can only assume it has something to do with Bootstrap 4.0.0 and the Umbraco grid layout mark-up and CSS. Thank you any information on this issue.
I guess I don't know exactly what you mean by creating my own rendering. I want to avoid a custom bootstrap file. My original templates were all done in HTML/CSS and used bootstrap 4.0.0. with no issues but when converted to use the grid layout in Umbraco does break. I should mention that the "breakage" is quite subtle but a two column with a paragraph of text in both columns will sit on top of each other whereas I had a homepage which was mostly images stacked in the grid and it didn't show any signs of breaking using 4.0.0, at least on the surface. Thank you for the feedback.
Okay, yes I see what you mean about how to change the rendering. Thanks, Ive never looked at that file. I'm guessing it would be a change to the classes umb-grid & grid-section since that mark-up and CSS would be the difference. Do know of any specific code changes that will make bootstrap 4 work responsively with Umbraco? I guess I would consider messing with the Umbraco grid system a bit daunting.
Bootstrap 4.0.0 breaks grid layout
Using Umbraco 7.8.1, Bootstrap 4.0.0 and a two column grid layout the columns did not sit side by side but rather on top of each other. I searched the Internet on this and found nothing. Setting the Bootstrap version back to 3.3.7 fixed this issue immediately. I then uncommented all my commented out CSS done while debugging and the template now works quite well with the exception of the differences between version 3.3.7 and 4.0.0. Therefore, since it doesn't seem to be an issue with my other included CSS files such as a rogue margin or padding setting I can only assume it has something to do with Bootstrap 4.0.0 and the Umbraco grid layout mark-up and CSS. Thank you any information on this issue.
Robb
Hi Robb,
This is probably becaused the default grid rendering is designed to use bootstrap 3 rendering.
You can roll out your own rendering or just change the default one (but be careful, your changes can be overwritten by a upgrade)
https://our.umbraco.org/documentation/Getting-Started/Backoffice/Property-Editors/Built-in-Property-Editors/Grid-Layout/Render-Grid-In-Template
Hi Robb,
Did you try creating your own rendering for the Grid ?
If so, did it solve your issues ?
Dave
Hi Dave,
I guess I don't know exactly what you mean by creating my own rendering. I want to avoid a custom bootstrap file. My original templates were all done in HTML/CSS and used bootstrap 4.0.0. with no issues but when converted to use the grid layout in Umbraco does break. I should mention that the "breakage" is quite subtle but a two column with a paragraph of text in both columns will sit on top of each other whereas I had a homepage which was mostly images stacked in the grid and it didn't show any signs of breaking using 4.0.0, at least on the surface. Thank you for the feedback.
Robb
Hi Robb,
have you checked the link from my previous post ?
Umbraco uses bootstrap 3 to render the grid markup. But you can overrule that.
Dave
Okay, yes I see what you mean about how to change the rendering. Thanks, Ive never looked at that file. I'm guessing it would be a change to the classes umb-grid & grid-section since that mark-up and CSS would be the difference. Do know of any specific code changes that will make bootstrap 4 work responsively with Umbraco? I guess I would consider messing with the Umbraco grid system a bit daunting.
Robb
is working on a reply...