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

kubiq

<p>Fully responsive Bootstrap 5 blocks, components and extends for Gutenberg</p>
<p>Now you can use Gutenberg editor as full-featured website builder.</p>
<p>Thanks to Bootstrap 5 – the world’s most popular front-end open source toolkit – you can build your layouts in 6 different breakpoints, so they will work perfectly on each device, no matter if your website visitor is on the phone, tablet, laptop or desktop.</p>
<p>You can use Bootstrap row and columns blocks with detailed settings for each breakpoint and autocomplete extension for bootstrap classes</p>
<ul>
<li>Option to load Bootstrap 5 css to editor from plugin if your theme doesn’t contain it</li>
<li>Option to load Bootstrap 5 css to frontent from plugin if your theme doesn’t contain it</li>
<li>Option to load Bootstrap 5 js to frontent from plugin if your theme doesn’t contain it</li>
<li>Option to automatically add .container class to inner container of fullwidth group or cover block</li>
<li>Option to remove .is-layout-constrained class from fullwidth group block</li>
<li>Custom breakpoints control – add, remove or change any breakpoint</li>
<li>Optimize Bootstrap CSS file by disabling not needed options and parts of Bootstrap</li>
<li>Bootstrap container block</li>
<li>
        Bootstrap row block</p>
<ul>
<li>Use quick selector to instantly select row while editing</li>
<li>Use predefined layouts</li>
<li>Generate custom layout instantly just by adding columns counts, eg. 2+8+2</li>
<li>Use any amount of columns</li>
<li>
                Use 6 different breakpoints to setup:</p>
<ul>
<li>Vertical alignment (align-items-*)</li>
<li>Horizontal alignment (justify-content-*)</li>
<li>Gutter (g-*)</li>
<li>Row columns (row-columns-*)</li>
</ul>
</li>
</ul>
</li>
<li>
        Bootstrap column block</p>
<ul>
<li>Use quick selector to instantly select column while editing</li>
<li>
                Use 6 different breakpoints to setup:</p>
<ul>
<li>Size (col-*)</li>
<li>Offset (offset-*)</li>
<li>Order (order-*)</li>
<li>Vertical alignment (align-self-*)</li>
</ul>
</li>
</ul>
</li>
<li>
        Bootstrap accordion block</p>
<ul>
<li>Two styles – default and flush</li>
<li>Always open option</li>
<li>First open on load option</li>
<li>Unlimited amount of accordion items</li>
<li>Unlimited accordion item inner blocks content</li>
</ul>
</li>
<li>
        Bootstrap tabs block</p>
<ul>
<li>Three styles – tabs, pills and text</li>
<li>Possibility to reorder tabs</li>
<li>Possibility to add and remove tabs</li>
<li>Unlimited amount of tabs items</li>
<li>Unlimited tab item inner blocks content</li>
</ul>
</li>
<li>Component for margin and padding Spacing for any block for 6 different breakpoints</li>
<li>Component for Display visibility – display per breakpoints, print display, logged in/out display</li>
<li>Component for Size – width, min-width, max-width, height, min-height, max-height, aspect-ratio for every breakpoint</li>
<li>Component for Flex properties – control flex containers and item</li>
<li>Component for Position properties – control position and z-index</li>
<li>Component for Snapping for group block, so you can push some content out of container (or just background)</li>
<li>Component for Alignment, so you can align your text to the left for PC but to the center for mobile</li>
<li>Component for autocomplete Bootstrap classes</li>
<li>Extended formats – uppercase, capitalize, lowercase, stretched-link, mark, non-breaking space (nbsp) and soft-hypen (shy) inserter</li>
<li>Extended shortcuts – shift+alt+[1..7] to switch between paragraph and headings levels – same as in classic editor (tinymce wysiwyg)</li>
</ul>


Block Editor Bootstrap Blocks

The best plugin to implement bootstrap with gutenberg. Many many thanks

Best plugin


If you're looking for a bootstrap blocks plugin, choose this one


Top bootstrap plugin and super responsiveness from kubiq

Fully responsive Bootstrap 5 blocks, components and extends for Gutenberg

Responsive Grid Layout Blocks (Bootstrap 4) vs Block Editor Bootstrap Blocks