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

3D Virge

The essential WP Editor Plugin for Bootstrap websites. Fully manageable responsive containers, rows and columns. Developers and editors easily create and edit bootstrap pages within the WP Editor. Without coding. Works perfectly in combination with loads of other plugins.
Use it with self-developed Bootstrap themes or regular themes!
Whether you want to set up a complete Bootstrap WordPress site or just want to quickly set up a temporary page. The Bootstrap blocks for WP Editor plugin enables you to make use of your activated WordPress theme. But you can also choose to start without the header and footer and start with a fresh page. Without any header and footer. It’s all up to you.
Features of Bootstrap Blocks for WP Editor v2:
NEW! in v2:
<ul>
<li>Align columns in row: left, center and right</li>
<li>Set visibility of columns per breakpoint</li>
<li>Set order of each column per breakpoint</li>
<li>Container wrapper: full width background colours and set additional class</li>
<li>Container and column background color option</li>
<li>Bootstrap button</li>
<li>Independent text parts colouring </li>
<li>Responsive spacer colouring</li>
<li>Responsive spacer visibility per breakpoint</li>
<li>Optimized for Bootstrap 5.3</li>
<li>Editor: adjustable view width (up to 100% of screen width)</li>
<li>Editor: collapse containers, rows and columns for better overview</li>
<li>Editor: view columns vertical and horizontal</li>
<li>Editor: breakpoint labels for quick overview</li>
</ul>
Features that were already there:
<ul>
<li>Insert containers, rows and columns in the WP Editor</li>
<li>Use the WP Editor blocks in the Bootstrap grid</li>
<li>Seamless integration with themes that use Bootstrap grid</li>
<li>Seamless integration with themes that do not use Bootstrap grid</li>
<li>Set overall identity colours and apply these in WP Editor</li>
<li>Option: start with empty ‘Bootstrap Page’ template</li>
<li>Option: enable Bootstrap grid from plugin dashboard</li>
<li>Option: wrap page title in Bootstrap grid on ‘Bootstrap page’ template pages</li>
<li>Option: hide default page title on ‘Bootstrap page’ template pages</li>
<li>Collapse containers for clear overview in the Editor</li>
<li>Add labels to containers for clear overview in the Editor</li>
</ul>
Extra Features of the Design Package add-on:
<ul>
<li>Set column use for all (6) Bootstrap breakpoints </li>
<li>Use of standard Bootstrap classes (such as mx-auto)</li>
<li>Responsive Spacer Block (not pixel based, but screen size based)</li>
<li>Suppress default header and footer on ‘Bootstrap page’ template pages</li>
<li>Full control over gutter setting</li>
<li>Make use of fluid containers</li>
<li>Lock container layouts to avoid unintended changes by editors</li>
<li>Editor: custom CSS code editor for adding css only to current post-item</li>
</ul>
More information <a href="https://bootstrapblocks.io/" rel="nofollow ugc">on our website</a>
<h3>Requirements:</h3>
<ul>
<li>WordPress 6.0 and up</li>
<li>Bootstrap 4.0 and up</li>
</ul>
<h3>Installation:</h3>
Add the free Bootstrap blocks for WP Editor plugin via your WordPress plugins page:
<ol>
<li>On the ‘Plugins’ page: click on “add new”</li>
<li>Search “Bootstrap blocks for WP Editor”</li>
<li>Click “install now”</li>
<li>Activate Bootstrap blocks for WP Editor on the ‘Plugins’ page</li>
</ol>
Or download it on the WordPress Plugins page and install manually:
<ol>
<li>On the ‘Plugins’ page: click on “add new”</li>
<li>Click on “Upload Plugin”</li>
<li>Choose the downloaded file on your hard drive</li>
<li>Click “install now”</li>
</ol>

Bootstrap Blocks for WP Editor v2

The essential WP Editor Plugin for Bootstrap websites. Fully manageable responsive containers, rows and columns. Without coding.

Block Editor Bootstrap Blocks vs Bootstrap Blocks for WP Editor v2