Index

Bootstrap 4 add-on

If you enable the support for responsive content, CKEditor will adapt its view and will allow you to edit not only content, but also the structure of the document.

You can activate this mode by enabling the support for Bootstrap 4 in the settings of the specific configuration. Using this add-on is free.

Edit configuration screenshotEnable the support for Bootstrap 4 on switch mode

Content structure in Bootstrap 4

The structure of 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 or fluid).

  • The very first <div> element that wraps all containers is the element that N1ED connects to and provides fully functional editing of containers, rows and columns.

  • If N1ED is connected to a container <div class="container">, it allows to edit only inner rows and columns of this container.

  • If the editor is connected to a row <div class="row">, manipulations with inner columns are available.

  • Finally, if you connect N1ED to one column <div class="col">, the editor will be available to this column only (either a specialized editor or CKEditor).

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 screenshotContainer types 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.

Row templates screenshotRow templates screenshot

Columns

Column is a key element, because it is column that contains the user content. Content can vary, and N1ED tries to identify the content type dynamically using the data-type attribute in the first hand (and it sets this attribute itself), and secondarily by content. If the content type was not recognized, CKEditor will use the mixed content type for this column.

You can change the content type using the Change column type button. If the type is changed to an incompatible type, the content may be emptied. After the column type has been changed, N1ED sets the data-type attribute for further type recognition during editing. This attribute can be filtered by when you display content for users of the website, or you may leave it as is - it does not influence the displaying of the content.

Column type screenshotColumn type screenshot

Using the Configure column button you can change the width and the margins of columns for different screen resolutions (breakpoints), as well as visibility of these breakpoints. All widths in Bootstrap are determined using the 12-column structure. For instance, the width of 6/12 makes the column to take a half of the parent row width. Often the column width is set based on the display capabilities: 12/12 on mobile devices, 6/12 on tablets, 4/12 on wide screens. Similarly, some blocks can be hidden on mobile devices if they are not needed there.

Column configuration screenshotColumn configuration screenshot

Options

In Dashboard you have all options you need to configure the plugin for your needs.

Include Bootstrap 4 into page - if you load Bootstrap 4 using a template on your website, disable this option. For example, if you use N1ED in the website control panel that is based on a non-Bootstrap template, then in order for N1ED to work correctly and correctly display content, you need to enable this option. In this case N1ED will include Bootstrap CSS files from the official Bootstrap CDN on startup.

Bootstrap edit configuration screenshotEdit configuration page. Bootstrap options