Gutenberg Mobile Preview – Bootstrap 4

• jarvis

• February 3, 2021 at 2:11 am

Hi All,

I hope someone can help put me out my misery!

I’ve created a basic theme using the Bootstrap 4 framework.

I used to use Flexible Layouts but currently migrating to Gutenberg

So far, so good! However, when I use Gutenberg’s preview and toggle Desktop/Tablet/Mobile

It doesn’t seem to pull through the Bootstrap grid and therefore looks pants.

I tried to add Bootstrap CSS via my theme’s function file like so:

function theme_gutenberg_block_styles() {
    add_theme_support( 'editor-styles' );

    add_editor_style( [
        'https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css',
        'style.css',
        'css/editor.css',

    ] );
}
add_action( 'after_setup_theme', 'theme_gutenberg_block_styles' );

I must be missing something but can’t see what.

Any help would be very much appreciated!
Thanks

• jarvis

• February 3, 2021 at 11:50 pm

Just to follow on from this, I believe the issue is due to the preview.

If I’ve got this right, the preview pane sets the size via in line styles, so the Bootstrap grid isn’t being applied as opposed to the actual browser resizing

Can’t think of a way around it! Just be good to be more accurate on the preview front you see.

Thanks

• Vitalii Kaplia

• April 4, 2022 at 1:15 am

+