Fixing Bootstrap 4 Grid system for Sitecore SXA 1.8

Reading Time: 2 minutes

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:

  1. Navigate to /sitecore/system/Settings/Feature/Experience Accelerator/Bootstrap 4
  2. Duplicate that module and move it to your own folder module under Feature layer. We called it {ClientName} Bootstrap:SXABootstrap401
  3. Set proper Grid Definition for your newly created Grid Setup:SXABootstrap402
  4. 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:SXABootstrap403
  5. To compare, this is how it looks like with default Bootstrap 4 Grid Definition:SXABootstrap404
  6. FE team realized this is not sufficient and we created a custom view for Container component to fix one last thing. We just added row class next to component-content div: SXABootstrap405You 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!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.