Bootstrap Editor add-on
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.
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
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.
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.
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.