Bootstrap styling in Carbon Editor documents

Background

Carbon Editor documents can be styled using Themes configured in the Administration view of CE.  There are different theme types for different document types.

HTML themes comprise of a CSS stylesheet and associated styling assets. These assets often include font files and Javascrpt files (for supporting interactive features (collapse) or more complex styling).

Adding Bootstrap Styling to CE

Bootstrap is a web framework that also makes use of this approach to styling.

So it is possible to add the Bootstrap CSS and Javascript files to Carbon Editor, alter the CSS selectors a little in the Bootstrap CSS to match the CE field naming structure and the two will play nicely together. 

Example Step by Step

1. First, locate and download the latest Bootstrap files (https://getbootstrap.com/docs/5.0/getting-started/download/)

2. Create a new theme in CE called Bootstrap v5

3. Add the Bootstrap.css file as a new stylesheet to the CE theme

4. Locate the bootstrap.js file, compress it to a ZIP (as per the instructions in the ‘adding assets to CE themes’  in the CE dashboard) and add the JS file to the Bootstrap theme assets

5. Then, create a new document and page in CE

6. Add in some text fields using the pre-defined field definitions (e.g. ‘SH-Heading-Level-1’) and save the document. 

7. Then, edit the Bootstrap CSS to add the pre-defined field definitions to the existing typography styling (e.g. add field ‘SH-Heading-level-1’ to ‘H1’ style definition in the style sheet)

8. And finally, configured the Bootstrap v5 theme to be used to style the example document 

This process gives the following result when styling the Carbon Editor page using the Bootstrap styling - preview the example page