Bootstrap content in iframe

This example shows Bootstrap inside iframe mode: typography, cards, accordion, responsive grid, and tables. Load Bootstrap CSS and JS into the iframe via custom.css / custom.js, then map editor options to Bootstrap conventions.

Code

<div id="entry-iframe-bootstrap">...</div>

const app = Redactor('#entry-iframe-bootstrap', {
    css: '/assets/redactor/',
    classname: 'content',
    custom: {
        css: ['https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'],
        js: {
            bodyEnd: ['https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js']
        }
    },
    classes: {
        tags: {
            img: 'img-fluid',
            table: 'table table-bordered'
        }
    },
    embed: {
        responsive: true,
        responsiveClassname: 'ratio ratio-16x9'
    },
    layout: {
        grid: 'row',
        column: 'col'
    },
    layouts: {
        __replace: true,
        'one-column': {
            title: 'One column',
            grid: 'row g-3',
            pattern: '-'
        },
        'two-columns': {
            title: 'Two columns',
            grid: 'row g-3',
            pattern: '-|-'
        },
        'three-columns': {
            title: 'Three columns',
            grid: 'row g-3',
            pattern: '-|-|-'
        },
        'four-columns': {
            title: 'Four columns',
            grid: 'row g-3',
            pattern: '-|-|-|-'
        }
    },

});

layout.grid / layout.column set the default Bootstrap row and column classes. Each layouts preset can override the row with grid (for example row g-3). Use pattern with - placeholders when column widths come from Bootstrap grid classes, not flex-basis.