The Sitecore has change the website development with launch of the SXA with their first release and now they have make their vision very clear about how to quickly ship the website to market via this very powerful tool.

The Issue

While working on one of the SXA website build project, I came across one strange finding. Even if you selected Bootstrap 4 as your grid system for website. There are may out of the box bootstrap css classes are missing. This leads to some investigation ad found of the Sitecore SXA has ported just grid related styles(bootstrap-grid.css) to Sitecore SXA but not the full bootstrap main css(bootstrap.css)

Now, I have two concerns, first how can we add this the Sitecore SXA way without touching existing MVC layout or creating new layout? and Secondly, how can you only enable/import this to selective websites?

The Fix

After some googleing and reading few of Sitecore documents, found following steps will help get the answers to both above mentioned concerns.

1. Create new base theme item of type /sitecore/templates/Foundation/Experience Accelerator/Theming/Base Theme under path /sitecore/media library/Base Themes (one can use insert options too). In my example I have given name bootstrap 411.
2. Create a Styles folder item of type /sitecore/templates/Foundation/Experience Accelerator/Theming/Folders/Styles (one can use insert option) under the newly created base theme item above.
3. Upload the css file to this styles folder using media upload feature. In my example I have uploaded bootstrap.css
4. Navigate to the site specific theme item under media library. For example, /sitecore/media library/Themes/Tenant1/Website1
5. In the Base Themes multi-select link field select the newly created base theme item in step 1 above
6. Publish all newly created items in step 1 and 2
7. Publish altered website specific theme item

Verification

New styles should work if the newly added stylesheet render on the page. To verify style link is render on website page or not we need to turn The Asset Optimizer off for the site (by default this is on and if it is already turned off you can skip these steps)

1. In the Content Editor, navigate to sitecore/content/<Tenant>/<Website>/Presentation/Page Designs.

2. In the Asset Optimization section, in the Styles Optimizing Enabled and Scripts Optimizing Enabled fields, to override styles and scripts optimization settings, select:
   • Default – to inherit global settings.
   • Yes – to always enable optimization for this site.
   • No – to always disable optimization for this site.

3. Publish the Page Design Item

4. Navigate to the web application in the browser and open the page view source and look for the newly created item path in the head section. In my example, looking for bootstrap-411(don’t mind the hyphen as it is due to link manager options settings)

<link href="/-/media/base-themes/bootstrap-411/styles/bootstrap.css" rel="stylesheet" />

Further to verify, also check other website within the same CMS and check the page source view for absence of newly added stylesheet.

In above example, we have added Style Sheet asset but this same can be done for Scripts assets as well

Happy Sitecore SXA website development…!!!

References

• https://doc.sitecore.com/developers/sxa/93/sitecore-experience-accelerator/en/enable-and-configure-the-asset-optimizer.html
• https://doc.sitecore.com/developers/sxa/93/sitecore-experience-accelerator/en/the-base-themes.html