We have faced some issues with newly introduced Bootstrap 4 Grid (introduced in SXA 1.8). There were wrapper row class where they shouldn’t be. It broke designs and also markup that FE team was expecting.
In latest version of SXA 1.8.1 these have been fixed based on Release Notes:
When you use the Bootstrap 4 grid, an extra unwanted row class is added around some placeholders.
If you cannot upgrade to Sitecore 9.1 Update 1 and SXA 1.8.1 and need to stick with SXA 1.8, here is a quick fix:
- Navigate to
/sitecore/system/Settings/Feature/Experience Accelerator/Bootstrap 4 - Duplicate that module and move it to your own folder module under Feature layer. We called it {ClientName} Bootstrap:
- Set proper Grid Definition for your newly created Grid Setup:
- Last thing to do is to set Grid Definition properly meaning set Row Class field to “row” and remove field values for Wrapping Tag and Wrapping Class fields:
- To compare, this is how it looks like with default Bootstrap 4 Grid Definition:
- FE team realized this is not sufficient and we created a custom view for Container component to fix one last thing. We just added
rowclass next tocomponent-contentdiv:
You can find instructions how to create custom views here on my blog.
Recommendation:
This is only workaround to quickly fix this issue in SXA 1.8! I strongly recommend requesting patch from Sitecore with public reference 301904 or upgrading to SXA 1.8.1 as soon as possible as if you start using this Grid system, you would need to change IDs of Grid settings for every single rendering once you upgrade. Think about it!
Happy Bootstrapping!