Bootstrap grid

This example shows how to set up Bootstrap Grid for Article. See more about the grid setting.

    Demo

    Code

    <!DOCTYPE html>
    <html>
    <head>
        <title>Article Editor</title>
        <meta charset="utf-8">
    
        <!-- css -->
        <link rel="stylesheet" href="/your-article-dist-path/article-editor.min.css" />
    </head>
    <body>
        <!-- element -->
        <textarea id="entry">
            <p>Content</p>
        </textarea>
    
        <!-- js -->
        <script src="/your-article-dist-path/article-editor.min.js"></script>
    
        <!-- call -->
        <script>
        ArticleEditor('#entry', {
            css: ['/your-article-dist-path/arx-frame.min.css'],
            custom: {
                css: ['/path-to-bootstrap/bootstrap.min.css']
            },
            grid: {
                classname: 'row',
                columns: 12,
                gutter: '1px',
                offset: {
                    left: '15px',
                    right: '15px'
                },
                patterns: {
                    '6|6': 'col-6|col-6',
                    '4|4|4': 'col-4|col-4|col-4',
                    '3|3|3|3': 'col-3|col-3|col-3|col-3',
                    '2|2|2|2|2|2': 'col-2|col-2|col-2|col-2|col-2|col-2',
                    '3|6|3': 'col-3|col-6|col-3',
                    '2|8|2': 'col-2|col-8|col-2',
                    '5|7': 'col-5|col-7',
                    '7|5': 'col-7|col-5',
                    '4|8': 'col-4|col-8',
                    '8|4': 'col-8|col-4',
                    '3|9': 'col-3|col-9',
                    '9|3': 'col-9|col-3',
                    '2|10': 'col-2|col-10',
                    '10|2': 'col-10|col-2',
                    '12': 'col-12'
                }
            }
        });
        </script>
    </body>
    </html>