Bootstrap Editor
for JS, CKEditor, TinyMCE
Overview Plugins
CKEditor add-on TinyMCE add-on Drupal 8 module WordPress plugin Joomla extension JavaScript library
Installing CKEditor to WordPress Installing CKEditor to Joomla Installing CKEditor to Drupal 7 How to install CKEditor plugin from CDN How to install a plugin to CKEditor How to adjust CKEditor settings
Include Bootstrap to CKEditor/TinyMCE CKEditor config FAQ CKEditor debugging manual Adding CKEditor add-ons to CS Cart
Bootstrap Editor logo
Get Bootstrap Editor inside
33 in 1
Bootstrap Full Bundle

Bootstrap Editor add-on for CKEditor

Bootstrap Editor plugin for CKEditor is great solution for building Bootstrap structure in already installed to your CMS editor.

Select the block and press the Bootstrap Editor toolbar button - Bootstrap Editor will be opened in full screen mode for editing current. If user press' "Save" button the content in CKEditor will be updated.

This add-on is easy to install (install it like any other add-ons).

Bootstrap Editor for CKEditor comes actually as 3 add-ons: Bootstrap Editor itself and two Bootstrap utilities for including Bootstrap into CKEditor and highlighting Bootstrap blocks.



The tool for building Bootstrap structure in WYSIWYG mode.
Helps you to attach Bootstrap styles to your document, so they will be displayed with appropriate sizes and positions defined by Bootstrap CSS.

Grid plugins

Visually shows structure of Bootstrap elements: containers, rows and columns.


  1. Unpack archived files directly to ckeditor/plugins.
  2. Turn on the plugin in ckeditor/config.js:
    config.extraPlugins = 'jsplus_bootstrap_include,jsplus_bootstrap_show_blocks,jsplus_bootstrap_editor';
  3. Add these buttons to toolbar definition:
    See CKEditor toolbar configuration manual to find out more about this step.
  4. Now you can use your installed plugins. Do not forget to sure that browser cache was cleared.