Index

Bootstrap Editor add-on

Features

Bootstrap Editor adds to N1ED a new document editing mode that allows visually create and edit the document layout, add specific Bootstrap 4 widgets, and preview the page on various devices.

Additional widgets

Bootstrap Editor adds the new widgets sidebar. Some of these widgets can be inserted to a document using the standard Add button, the other part (structure elements) is available from the special Bootstrap Editor mode.

Preview on various screen resolutions

When activated in your CKEditor or TinyMCE, Bootstrap Editor always displays a ruler above the document that allows specifying the maximum width of the document in accordance with Bootstrap breakpoints.

For example, clicking the MD area limits the document in CKEditor or TinyMCE to the width of the corresponding breakpoint, and you will see this document exactly is it would display on the screen of a tablet. The ruler has all modes starting from XS (the smallest smartphones) to XL (wide screen monitors). One of Bootstrap 4 features is that for each such breakpoints you can define your own rules to display elements. This is important for the structure in the first hand (containers, row, columns).

After telling the editor to use a specific preview width, you can continue editing the document in this mode without any restrictions. Which basically means that it is not a preview, but a full-featured and accurate imitation of real-world usage of the content on your website on various devices.

Editing the document structure

If you switch to document editing mode in N1ED to Bootstrap Editor, you can easily create and modify the structure of blocks on the page. All structure widgets are highlighted, as well as various tools to manipulate them.

The structure of the content in Bootstrap 4 is as follows: fragments of content are organized into columns - cells with dynamically changed width to match the current screen resolution. Columns can group together to form a row. Groups of rows are enclosed in a container (fixed width or fluid).

Containers

There are two types of containers - fixed and fluid. A fluid container fills all the available width, while the fixed one always has the specific width that corresponds to the current screen resolution (breakpoint as defined in Bootstrap). You can change the type of the container when you add it or in the settings of that block.

Container screenshot Container edit background screenshot

Rows

You can move, delete or configure style of any row. When a new row is created, you can instantly fill it with columns using one of suggested templates.

Add row screenshot

Columns

A column contains the editable content and is placed inside a row.

Add column screenshot Edit column screenshot

Options

In Dashboard you have all options you need to configure the plugin for your needs. If you use self-hosted version of N1ED, use config.js to set its options. Read more about configuring N1ED