Unnecessary row element added in Bootstrap 4 grid


Description

An extra unwanted row element may be added around some renderings when using the Bootstrap 4 grid system. For example, when creating a new SXA site, partial designs and components can create unnecessary <div class="row"> elements:

<div class="row">
  <div class="row">
    <div class="component title col-12">
      ...
    </div>
  </div>
  <div class="row">
    <div class="component title col-12">
      ...
    </div>
  </div>
</div>
instead of the expected
<div class="row">
  <div class="component title col-xs-12">
    ...
  </div>
  <div class="component title col-xs-12">
    ...
  </div>
</div>

This issue affects SXA 1.8.0 release.

Solution

To resolve the issue, download and install the patch compatible with the affected product version found on this page:
https://github.com/SitecoreSupport/Sitecore.Support.301904/releases.
To get a solution for other releases, contact Sitecore Support.