Q: Why don't I see the BootStrap Rows in my rich text editor (tinyMCE, etc) like in the frontend?

A: This is because these editors (tinyMCE, JCE, etc) do not load the BootStrap CSS files.

If you use a rich text editor in Joomla (tinyMCE, JCE, etc), you will see that if you add a BootStrap Row using the BRB , there is only placeholder text (at first sight), and that the columns are not next to each others but under each other.

Why this happens is easy to explain :

In Joomla, all rich text editors are loaded within a iframe. Unfortunately, this means that the bootstrap css files (though they get loaded by the BE template) are not used within this iframe - only those CSS files that come with the editor itself are loaded.

This means that if you e.g. define a class 'myclass' with red background color in your frontend template, and if you add the respective markup (e.g. a span with class 'myclass'), you will not see a red background color for this span in the editor, as this only applies for the frontend template.

However, if you switch to the HTML view by clicking the <> icon, you will see that the correct markup has been inserted, e.g. if you selected a half split row, you will see the correct markup with 2x col-sm-6 resp. span6 (BS3 / BS2 - this depends on your setting).

We recommend using the CodeMirror Joomla Editor for better HTML markup control.
Alternatively, you can switch to the HTML view as explained above to control the HTML markup.

2024-02-11