Bootstrap Editor add-on

Bootstrap Editor add-on logo Bootstrap Editor is an add-on for N1ED that works in CKEditor and TinyMCE and greatly simplifies responsive content editing. Create or edit Bootstrap layout completely visually using a set of tools and widgets this add-on provides. See the result instantly, exactly as users see it.

Get Bootstrap Editor

With Bootstrap Editor you can:

Simplify responsive content editing

Visually add or edit containers, rows or columns; adjust height, width or margins of any element; change visibility of elements, and adjust layout to the screen size by toggling Bootstrap breakpoints in two clicks. You’ve got full control over the entire Bootstrap markup, the grid system and styles in the most straightforward and convenient way.

Preview content directly in the editor

With Bootstrap Editor you enjoy convenience of the true WYSIWYG approach. The edited content is displayed exactly as visitors see it in their browsers. And with instant mobile preview you can test if the content would display correctly on smartphones and smaller screens. Also without leaving the editor.

Easily create mobile content

With today’s huge lean towards mobile audiences, it is crucial to create content that displays perfectly on mobile screens. Bootstrap Editor has everything for comfortable editing of mobile-ready websites: from visual toggling of Bootstrap breakpoints and simplified navigation to instant preview of the webpage adapted to a specific resolution.

Bootstrap Editor features

WYSIWYG editing

With a gesture of the mouse you can switch from the XS screen size to LG and then back to MD to check if everything looks as it should. Editing is enabled all the time.

Bootstrap 4 and Bootstrap 3 support

Freely edit Bootstrap grid with your bare mouse: edit columns, rows and containers, set properties and attributes. Use the enhanced fullscreen mode for complex layouts.

Support for Bootstrap styles

Apply any Bootstrap theme to your content editor or modify styles for your own custom look. Simple fine-tuning prevents conflicts with specific CMS designs.

Create custom Bootstrap templates

The feature to create custom templates will give you the power to select any Bootstrap block you have on the page and save it as a template (image preview will be generated automatically). Then you can update them if you need to change anything (screenshot will be updated too automatically).

Easy breakpoint editing

Set visibility and width of certain columns on the page thanks to visual Bootstrap breakpoint editing. Immediately control the result using the mobile-adapted preview.

Configurable options

In Dashboard you have all options you need to configure the plugin for your needs. Read more about configuring Bootstrap Editor to set its options.

Choose row template screenshot Insert row template screenshot Create custom row template Edit column screenshot Container screenshot Add Bootstrap column screenshot Add Bootstrap row screenshot