CWRUCAS

Code is adapted from the plugin ‘Columns’ by Konstantin Kovshenin.
Bootstrap is an HTML, CSS, and JS framework that is used to develop responsive, mobile websites. It employs a grid system that divides the viewport into twelve distinct columns. On desktops, the columns scale proportionally to the width of the viewing area while on mobile devices and tablets the columns stack on top of one another. This plugin takes advantage of that grid system to allow for WordPress content to be split up equally between the twelve columns.
To create a group of columns, use the [column-group] shortcode. To add columns to a group, use the [column] shortcode. For example:
<pre><code>[column-group]
 [column]This is the first column[/column]
 [column]This is the second column[/column]
[/column-group]
</code></pre>
The first column will occupy the first six columns of the Bootstrap grid while the second column will fill the remaining six.
<h4>Spanning Columns</h4>
The plugin’s columns can also be manually spanned across the Bootstrap grid. By adding the span attribute to the starting column shortcode, the number of Bootstrap columns that the WordPress columns take up can be assigned. For example:
<pre><code>[column-group]
 [column span=“4”]This is the first column.[/column]
 [column span=“6”]This is the second column.[/column]
 [column span=“2”]This is the third column.[/column]
[/column-group]
</code></pre>
The columns will take up four, six, and two of the Bootstrap columns respectively. Note: The span value is actually a ratio so if the total value of the spans in a column group does not equal twelve, then the plugin will assign the column sizes by means of percentage.

Columns for Bootstrap

This WordPress plugin adds a columns shortcode that utilizes Bootstrap for mobile responsiveness.

kubiq

Fully responsive Bootstrap 5 blocks, components and extends for Gutenberg
Now you can use Gutenberg editor as full-featured website builder.
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.
You can use Bootstrap row and columns blocks with detailed settings for each breakpoint and autocomplete extension for bootstrap classes
<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
<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:
<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
<ul>
<li>Use quick selector to instantly select column while editing</li>
<li>
 Use 6 different breakpoints to setup:
<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
<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
<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

Columns for Bootstrap vs Block Editor Bootstrap Blocks