How-To Index
Build content block by block
Insert new blocks from gallery
Insert blocks custom grid
Rearrange, copy, delete blocks
Bootstrap Editor advanced mode
Custom block templates
Create custom block template
Update custom block template
Insert custom block from templates
Organize custom blocks templates
Share across websites
Composing block contents
Column system basics
Edit block structure
Set block background
Change block styles
Content alignment inside blocks
Mobile-ready content basics
Build responsive content
Editing HTML source code
Widgets and media
Widgets basics
Boostrap widgets
Image widgets
Image Editor
File Manager
Font Awesome
YouTube
Placeholder
Page embed
Typography basics
Text, paragraphs, headers
Links and anchors
Tables
Custom widget
Source code
Classes, styles, attributes
Working with breadcrumbs
Translator
AI Text

How to build and preview Bootstrap responsive content in TinyMCE and CKEditor

Previous chapter - Understanding the basics of Bootstrap's mobile-ready design.

N1ED already handles most of the responsive features transparently. For example, when you insert an empty Bootstrap grid, it adds different classes for mobile and wide-screen breakpoints.

You can then control all your breakpoints in Advanced Bootstrap Editor mode. Switch to this mode by pressing the "Grid" icon and see the breadcrumbs ruler at the top of the content.

Edit and preview Bootstrap responsible content in TinyMCE/CKEditor

Switching between them will change content display in TinyMCE and CKEditor, forcing the selected Bootstrap breakpoint.

This will have no effect on the real content display on the side of website visitors, as Bootstrap automatically chooses the appropriate breakpoint using its CSS rules.