Examples | Bootstrap grid

Redactor / Examples

This example shows how the Bootstrap grid works inside Redactor content. Also the entire page has Bootstrap styles in this example, and Redactor inherits them for the content. See below for a example code of launching the editor.

<h1>Build fast, responsive sites with Bootstrap</h1>

<p>Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Star stuff harvesting star light kindling the energy hidden in matter a mote of dust suspended in a sunbeam bits of moving fluff another world brain is the seed of intelligence. Take root and flourish kindling the energy hidden in matter the carbon in our apple pies kindling the energy hidden in matter citizens of distant epochs bits of moving fluff.</p>

Code

<!DOCTYPE html>
<html>
<head>
    <title>Redactor</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

    <!-- Redactor CSS -->
    <link rel="stylesheet" href="/your-dist-path/redactor.min.css" />

</head>
<body>
<!-- element -->
<textarea id="entry">
    ...
</textarea>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<!-- Redactor JS -->
<script src="/your-dist-path/redactor.min.js"></script>

<!-- Call  -->
<script>
let app = Redactor('#entry', {
    nostyle: true,
    context: true,
    classes: {
        tags: {
            img: 'img-fluid',
            table: 'table table-bordered'
        }
    },
    embed: {
        responsive: 'embed-responsive embed-responsive-16by9'
    },
    layout: {
        grid: 'row',
        column: 'col'
    },
    layouts: {
        set: true,
        'one-column': {
            title: 'One column',
            grid: 'row',
            pattern: 'col'
        },
        'two-columns': {
            title: 'Two columns',
            grid: 'row',
            pattern: 'col|col'
        },
        'three-columns': {
            title: 'Three columns',
            grid: 'row',
            pattern: 'col|col|col'
        },
        'four-columns': {
            title: 'Four columns',
            grid: 'row',
            pattern: 'col|col|col|col'
        },
        '8-4': {
            title: '8 + 4',
            grid: 'row',
            pattern: 'col-8|col-4'
        }
    }
});
</script>
</body>
</html>