helpful.dev

This plugin adds flexible Bootstrap 4 blocks to the WordPress editor for creating custom page layouts with the Bootstrap grid.
Are you using Advanced Bootstrap Blocks? <a href="https://wordpress.org/plugins/advanced-bootstrap-blocks/#reviews">Write a review</a>!
<h3>Blocks</h3>
Advanced Bootstrap Blocks adds the following Bootstrap 4 blocks to the WordPress editor:
<ul>
<li>Container (fixed-width or fluid, with background image settings)</li>
<li>Row</li>
<li>Column</li>
<li>Button and Button Group</li>
<li>Card with Header, Body, Footer</li>
<li>Jumbotron</li>
</ul>
<h3>Block Templates</h3>
Do you need to create standard block layouts for WordPress pages and posts? The WordPress editor lets you define custom block templates inside your theme.
The example below may get you started. Visit the <a href="https://developer.wordpress.org/block-editor/developers/block-api/block-templates/" rel="nofollow ugc">WordpPress Block Editor Handbook</a> to learn more about supercharging your WordPress themes with blocks templates.
<pre><code><?php
if(in_array('advanced-bootstrap-blocks/advanced-bootstrap-blocks.php', apply_filters('active_plugins', get_option('active_plugins')))){ 
 // do stuff only if the Advanced Bootstrap Blocks plugin is active 
 add_action( 'init', 'advancedbootstrapblocks_register_page_template' );
 function advancedbootstrapblocks_register_page_template() {
 $post_type_object = get_post_type_object( 'page' );
 $isFluid = get_theme_mod( 'understrap_container_type' ) === 'container-fluid'; 
 $post_type_object->template = [
 [ 'advanced-bootstrap-blocks/container', 
 ['className'=>'py-5', 'isWrapped' => $isFluid, 'isFluid' => false ], 
 [
 [ 'advanced-bootstrap-blocks/row', 
 [],
 [
 [ 'advanced-bootstrap-blocks/column', 
 ['className'=>'col-md-8 offset-md-2 text-center'], 
 [
 ['core/heading', 
 [ 'className' => 'display-4', 'level' => 1, 'placeholder' => 'Hello, World!', ], 
 []
 ],
 [ 'core/paragraph', 
 ['className' => 'lead', 'placeholder' => 'Lorem ipsum dolor sit amet.', ], 
 []
 ],
 ]
 ]
 ]
 ]
 ]
 ],
 ];
 }
}
</code></pre>

Advanced Bootstrap Blocks

... and that's not saying much because the others were broken or terrible. Even still, this one is on the right track, and I'm happy to see that at least somebody is getting it right. Thanks for your hard work!

So far the best bootstrap block plugin

This is really well done, it does lack some features to become perfect, and has some issues with the editor (columns chaos if multiple classes are set) but it works perfectly. By far the fastest way to get Bootstrap into Gutenberg : THUMBS UP

Very usable !

Build responsive Bootstrap 4 layouts inside the Gutenberg editor.

Bamboo MCR

This plugin provides several shortcodes for organising your content into multi-column layouts. It supports two, three and four column layouts and allows for content to span multiple columns if required.
Usage
Insert the required shortcodes into your content as follows:
2 column layout:
<pre><code> [column-half-1]
 First column of content
 [/column-half-1]
 [column-half-2]
 Second column of content
 [/column-half-2]
</code></pre>
3 column layout:
<pre><code> [column-third-1]
 First column of content
 [/column-third-1]
 [column-third-2]
 Second column of content
 [/column-third-2]
 [column-third-3]
 Third column of content
 [/column-third-3]
</code></pre>
4 Column layout:
<pre><code> [column-quarter-1]
 First column of content
 [/column-quarter-1]
 [column-quarter-2]
 Second column of content
 [/column-quarter-2]
 [column-quarter-3]
 Third column of content
 [/column-quarter-3]
 [column-quarter-4]
 Fourth column of content
 [/column-quarter-4]
</code></pre>
If you want content to span multiple columns you can combine the shortcodes to create a column spans multiple spaces, for example:
<pre><code> 1 Third / 2 Thirds

 [column-third-1]
 First column of content
 [/column-third-1]
 [column-third-2-3]
 Second column of content that spans the second and third columns
 [/column-third-2-3]

 1 Quarter / 2 Quarters / 1 Quarter

 [column-quarter-1]
 First column of content
 [/column-quarter-1]
 [column-quarter-2-3]
 Second column of content that spans the second and third columns
 [/column-quarter-2-3]
 [column-quarter-4]
 Third column of content that occupies the fourth quarter column
 [/column-quarter-4]
</code></pre>
If you need to embed a set of columns within a column, you can do so by adding ‘inner-‘ to the shortcode as follows:
<pre><code> [column-half-1]
 Some Text
 [inner-column-half-1]
 Some more text
 [/inner-column-half-1]
 [inner-column-half-2]
 Even more text
 [/inner-column-half-2]
 [/column half 1]
 [column-half-2]
 The final text
 [/column-half-2]
</code></pre>
You can also change the background colour of a colour by adding an attribute to the shortcode as follows:
<pre><code> [column-half-1 background="e8e8e8"]
</code></pre>

Bamboo Columns

This plugin provides several shortcodes for organising your content into multi-column layouts. It supports two, three and four column layouts.

Advanced Bootstrap Blocks vs Bamboo Columns