Is there any way to change Sitecore sxa default structure in html without writing custom code. I am getting extra wrapper div row on page

Question

I am working on a Sitecore SXA website and i am adding default component of SXA but as per UI html we need to remove div row wrapper class which is coming after adding components on the page. I have to use default html. I am using bootstrap 5 in our project. For reference i am adding screenshot as well.

Answer 1

You can navigate to /sitecore/system/Settings/Feature/Experience Accelerator/Bootstrap 5/Bootstrap 5 Grid Definition

Lookout for settings that deal with <div class="row"> element. You can customize settings to tailor the HTML output

Please refer to the screenshot provided below:

Answer 2

If you want to remove this extra row that is wrapping your components, you need to patch a config by specifying certain placeholders that you want to exclude from generating the row.

<?xml version="1.0" encoding="utf-8"?>
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <experienceAccelerator>
      <grid>
        <placeholderWrapper>
            <excludedPlaceholders>
                <placeholder patch:after="body-bottom">utility-links</placeholder>
                <placeholder patch:after="utility-links">login-link</placeholder>
            </excludedPlaceholders>
        </placeholderWrapper>
      </grid>
    </experienceAccelerator>
  </sitecore>
</configuration>

So in the above, we have added the placeholders @Html.Sitecore().Placeholder("utility-links") and @Html.Sitecore().Placeholder("login-link") and the div row will not be rendered.

Refer to this for more information

Sitecore SXA- Remove div row wrappers

Hope this helps.

Answer 3

I believe since you are using a container component, in that case extra div is generated through PlaceholderDatasourceContext inside the Container.cshtml file.

Above wrapper invokes the Grid responsible for generating the div, that can be found by navigating to Site Settings Item as shown below.

In above case Bootstrap 5 theme is used, therefore the wrapping tag can be removed from the following item (/sitecore/system/Settings/Feature/Experience Accelerator/Bootstrap 5/Bootstrap 5 Grid Definition) as below.

As a additional note pipeline responsible for generating the wrapper through above item, sits inside the mvc.renderPlaceholder pipeline processor as below.

<processor type="Sitecore.XA.Foundation.Grid.Pipelines.RenderPlaceholder.AddPlaceholderWrapper, Sitecore.XA.Foundation.Grid" resolve="true"></processor>

Attached below is the snippet of the PlaceholderWrapper marker extension, that generates row wrapper on the page.

Hope this helps.