Bootstrap Editor Configuration

Connecting Bootstrap 4 or Bootstrap 3 styles to your content, adding layout builder functions, and adding Bootstrap widgets - all of these requires the Bootstrap Editor module.

In majority of cases it does not require much configuration, but you may still want to customize it for your specific needs.

Here is an example of the default config:

framework: "bootstrap4",
bootstrap4: {
    include: true,
    includeToGlobalDoc: true,
    url: "//",
    urlJQuery: "//",
    includeJQuery: true,

    rootContains: "containers",
    detectStructure: true,
    fixStructure: false,

    breakpoints: [
            name: "",
            title: "XS",
            minWidth: 0
            name: "sm",
            title: "SM",
            minWidth: 576
            name: "md",
            title: "MD",
            minWidth: 768
            name: "lg",
            title: "LG",
            minWidth: 992
            name: "xl",
            title: "XL",
            minWidth: 1200

Specify the framework

If you use Bootstrap 4, you don't need to configure anything. But if you need Bootstrap 3, specify this in the framework parameter, and then configure the framework in the bootstrap3 section as follows:

framework: "bootstrap3",
bootstrap3: {
  // Your config goes here

Below are configuration options for Bootrap 4 (it is similar for the version Bootstrap 3).

Activate Bootstrap Editor by default

When your editor is opening to full screen Bootstrap Editor mode is automatically activated by default. If you prefer to go into Bootstrap grid editing mode manually, please set ui.activateBootstrapEditorOnFullScreen parameter to false.

Including Bootstrap 4 and applying styles to content

The bootstrap4.include parameter controls how styles and scripts of Bootstrap 4 are connected to your content. In some cases (for example, when working in the inline mode in the admin panel that already uses Bootstrap styles) you may need to set this value to false.

If your CMS or framework already adds Bootstrap 4 to the page, you may want to no include it twice. Use includeToGlobalDoc: true. Note that you must not fully disable Bootstrap 4 with bootstrap4.include because internal TinyMCE or CKEditor frame still needs Bootstrap 4 to be included.

The bootstrap4.url parameter specifies the path to Bootstrap, you can change the version but continue loading Bootstrap 4 from CDN or set the URL on your own server.

You don't always need to include jQuery. If you don't need that, set bootstrap4.includeJQuery to false or change bootstrap4.urlJQuery to specify the location of this library.

Setting custom Bootstrap breakpoints

Bootstrap provides own breakpoints to fit content to different devices. These breakpoints are defined by key bootstrap3.breakpoints or bootstrap3.breakpoints depending of framework you use.

The easiest way to change then is to copy existing default settings and change them as you wish. Be sure you include correct (your own) Bootstrap version in this case..

Layout structure parameters

Set bootstrap4.rootContains according to how you prefer creating structure inside your document. Choose the value for this parameter based on the type of the existing content on your website.

If your content is a set of Bootstrap containers, then leave the "containers" value (by default).

If the root tag of your content is a container itself, set the value of "rows", and Bootstrap Editor will offer adding rows inside that container when you edit the layout.

"none" value will tell to Bootstrap Editor not to add any Bootstrap grid elements in the root and do not try to find them there. In this case your Bootstrap Editor will only edit tags with attribute data-bootstrap-contains="rows" or data-bootstrap-contains="containers" you manually mark in your templates. Detection of existing structure will also work if you bootstrap4.detectStructure is set to true.

However, Bootstrap Editor can automatically detect the structure of your document including nested containers and lines. You may suppress this behavior. Set bootstrap4.detectStructure to false.

Fixing existing Bootstrap 4 layout

When you use Bootstrap Editor it can fix your Bootstrap 4 structure (layout) when it does not fit Bootstrap 4 standards. For example it will wrap all contents inside containers in a row and column in case it's not inside them. This is made to keep your markup correct and help Bootstrap Editor to detect blocks when you are in layout builder mode. You can use fixer by setting bootstrap4.fixStructure to true.