How can I prevent nested placeholders from being wrapped by a bootstrap row tag?

Question

In our project, we assigned a partial design with a placeholder for stage modules and a placeholder for content modules to each page design. The rendered markup then looks like this, because the partial design (Partial Design Dynamic Placeholder.cshtml) and the bootstrap body (Bootstrap4Body.cshtml) contain a placeholder.

Our frontend developers aren't happy with this because two consecutive row tags aren't bootstrap compliant.

Answer 1

My investigation has shown that it can be easily done by configuration. Individual placeholders can be explicitly excluded from wrapping:

<?xml version="1.0" encoding="utf-8" ?>
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
    <sitecore>
        <experienceAccelerator>
            <grid>
                <placeholderWrapper>
                    <excludedPlaceholders>
                        <placeholder>main</placeholder>
                    </excludedPlaceholders>
                </placeholderWrapper>
            </grid>
        </experienceAccelerator>
    </sitecore>
</configuration>

Answer 2

You can configure this behavior in the Grid Definition item under sitecore/System/Settings/Feature/. There is a field called Row class (for the Row Splitter component) and Row Container class (for all containers). By default, both of these are set to "row", on the Bootstrap grid definition. (Official Sitecore documentation here)