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

conversionmedia

Sebastian Buchwald

QuantumPress

Quantum Viewports extends the native Gutenberg blocks with responsive style controls without using extra blocks. 
Unlike other plugins that add custom blocks or duplicate components, Quantum Viewports integrates directly with the standard block components.
Key Features: 
– Works with all Block Themes out-of-the-box 
– Adds responsive controls (mobile, tablet, desktop) directly into block styles for margin, padding, border, shadow, background, and custom properties 
– Wraps all generated styles into CSS classes for clean frontend output 
– Built with a mobile-first approach: settings are applied to the appropriate viewport depending on which viewport is active while editing 
– Includes a Keyframe-style UI to preview, reset, or manage responsive styles per viewport 
– Includes a developer-friendly API (<code>registerRenderer</code>) to attach custom style components (currently JavaScript only)
<h4>Early Access – Feedback Welcome</h4>
Quantum Viewports is currently in active Early Access. 
The responsive style engine already works well with many Block Themes, but we are still gathering real-world feedback to ensure broader compatibility across different themes and editor configurations.
If you encounter something unexpected. A great success story, a bug, or a theme setup that behaves differently, we would love to hear from you. 
Every report helps us shape a reliable and truly native solution for responsive Block Styles in the WordPress ecosystem.
<h3>Getting Started</h3>
<h4>Example: Adjusting paragraph spacing with mobile-first and breakpoints</h4>
<ol>
<li>
Insert a Paragraph block
<ul>
<li>Open the Block Editor and add a Paragraph block.</li>
</ul>
</li>
<li>
Mobile View (base, 0px)
<ul>
<li>Select the Paragraph → open Styles panel → Spacing → Margin → Bottom.</li>
<li>Set margin to 20px.</li>
<li>This applies from 0px up, used as the baseline for all viewports.</li>
</ul>
</li>
<li>
Tablet View (override, min-width tablet)
<ul>
<li>Switch to Tablet viewport.</li>
<li>Change bottom margin to 40px.</li>
<li>This applies from the tablet breakpoint upwards, including Desktop.</li>
<li>A Keyframe marker appears for Tablet.</li>
</ul>
</li>
<li>
Desktop View (optional, min-width only)
<ul>
<li>Switch to Desktop viewport.</li>
<li>To apply changes only to Desktop, toggle “Edit on min-width”.</li>
<li>Set bottom margin to 60px.</li>
<li>Now a Media Query is generated for Desktop only.</li>
<li>Tablet margin remains 40px, Mobile margin remains 20px.</li>
</ul>
</li>
<li>
Frontend Result
<ul>
<li>Save and preview.</li>
<li>Margins adapt: Mobile 20px, Tablet 40px, Desktop 60px.</li>
<li>All styles are wrapped in CSS classes, mobile-first, optimized for any Block Theme.</li>
</ul>
</li>
</ol>
<h3>Feedback and Issues</h3>
GitHub Repository: https://github.com/Quantum-Press/Viewports 
Contact: https://quantum-press.com/en/contact

Quantum Viewports

Extend your BlockTheme to make standard block styles responsive! ---

Block Editor Bootstrap Blocks vs Quantum Viewports