Joe Bailey-Roberts

<p>Responsive Grid Layout Blocks (Bootstrap 4) brings the power of <a href="https://getbootstrap.com/" rel="nofollow ugc">Bootstrap 4</a> and its layout grid to the Gutenberg editor.</p>
<h3>How does it work?</h3>
<p>After activating the plugin, you’ll see the option to add Bootstrap containers, rows and columns within the editor.</p>
<h3>Acknowledgements</h3>
<p>This project was bootstrapped with <a href="https://github.com/ahmadawais/create-guten-block" rel="nofollow ugc">Create Guten Block</a>.</p>
<h3>Update Notice</h3>
<h4>1.5</h4>
<ul>
<li>This is a breaking update due to the renaming of blocks.</li>
</ul>


Responsive Grid Layout Blocks (Bootstrap 4)

Bringing the power of Bootstrap 4 to the Gutenberg Editor

Bamboo MCR

<p>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.</p>
<p>Usage</p>
<p>Insert the required shortcodes into your content as follows:</p>
<p>2 column layout:</p>
<pre><code> [column-half-1]
 First column of content
 [/column-half-1]
 [column-half-2]
 Second column of content
 [/column-half-2]
</code></pre>
<p>3 column layout:</p>
<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>
<p>4 Column layout:</p>
<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>
<p>If you want content to span multiple columns you can combine the shortcodes to create a column spans multiple spaces, for example:</p>
<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>
<p>If you need to embed a set of columns within a column, you can do so by adding ‘inner-‘ to the shortcode as follows:</p>
<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>
<p>You can also change the background colour of a colour by adding an attribute to the shortcode as follows:</p>
<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.

Responsive Grid Layout Blocks (Bootstrap 4) vs Bamboo Columns