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

zish

fkfaisalkhan007

Sharik Khan

Pathhan

mohammadhanif

Alexander

FARAZFRANK

A WP Life

<p>Frank Responsive Checker is a complete tool for testing site layouts and front-end performance directly inside your WordPress dashboard. By simulating 13+ specific device viewports, including the latest mobile screens, tablets, and desktop displays, this tool streamlines the debugging process for developers, designers, and website owners.</p>
<p>Whether you are performing a design audit, checking website accessibility, or testing custom breakpoints, this tool provides a native testing environment without requiring third-party subscriptions or external applications.</p>
<p>How this plugin works: <a href="https://wpfrank.com/how-to-use-frank-responsive-checker/" rel="nofollow ugc">Check Docs</a></p>
<h3>Key Features List</h3>
<ul>
<li>13+ Device Presets: Test on modern smartphones, tablets, and desktop displays.</li>
<li>Automatic Breakpoint Detection: Scan your CSS to find and jump to active media queries instantly.</li>
<li>Visual Regression Testing: Save baseline layouts and use comparison sliders to catch pixel shifts.</li>
<li>Side-by-Side Comparison: View multiple devices at once with fully synchronized scrolling.</li>
<li>Accessibility Scanner: Audit WCAG color contrast, missing alt tags, and test keyboard focus maps.</li>
<li>Advanced Developer Tools: Built-in DOM inspector, JavaScript console, and SEO analyzer.</li>
<li>Network Throttling: Test performance and loading states with Slow 3G and Offline emulation.</li>
<li>Touch Mode Simulation: Trigger authentic swipe and tap events for mobile interactions.</li>
<li>Marketing Mockup Generator: Snap instant screenshots and create high-res transparent designs.</li>
<li>Dark/Light Mode Toggles: Force color scheme preferences without changing OS settings.</li>
</ul>
<h3>Comprehensive Device Preview and Viewport Testing</h3>
<p>Simulate how your web pages render on popular mobile screens, tablets, and desktop monitors instantly.</p>
<ul>
<li>Test layouts across modern smartphones like the iPhone 15 Pro, Samsung Galaxy S22, and Google Pixel.</li>
<li>Review tablet views including iPad Pro and Galaxy Tab formats.</li>
<li>Toggle between portrait and landscape orientation with a single click to verify responsive flow.</li>
<li>Enter custom width and height values to test any specific viewport size not included in the presets.</li>
<li>Save your custom device profiles to your personal library for quick access during future testing sessions.</li>
</ul>
<h3>Automatic CSS Breakpoint Detection</h3>
<p>Never guess where your design breaks again. The built-in breakpoint scanner automatically reads your active stylesheet and extracts all media query breakpoints.</p>
<ul>
<li>Automatically detect and list all CSS breakpoints used on the current page.</li>
<li>Click any detected breakpoint to instantly snap the viewport to that exact width.</li>
<li>Review how your layout responds at critical structural transition points.</li>
</ul>
<h3>Visual Regression and Layout Comparison</h3>
<p>Identify pixel-level changes and layout shifts using advanced visual comparison tools.</p>
<ul>
<li>Establish a baseline screenshot of your current layout to serve as a reference point.</li>
<li>Use the visual comparison overlay slider to detect exact differences between your baseline and new code changes.</li>
<li>Load multiple device frames side-by-side to examine layout consistency across different screen sizes.</li>
<li>Synchronize scrolling across all active comparison panels to inspect lengthy pages effortlessly.</li>
</ul>
<h3>Web Accessibility Audits (WCAG Compliance)</h3>
<p>Ensure your website is accessible to all users by running automated accessibility tests directly on your live pages.</p>
<ul>
<li>Perform WCAG contrast checks to verify that text remains readable against background colors.</li>
<li>Scan the document for images missing alternative text attributes to improve screen reader compatibility.</li>
<li>Visualize the keyboard navigation flow with numbered focus map badges.</li>
<li>Simulate screen reader output to understand how visually impaired users experience your content.</li>
</ul>
<h3>Advanced Developer Tools and Debugging</h3>
<p>Access a suite of advanced features designed specifically to help developers troubleshoot complex front-end issues.</p>
<ul>
<li>Network Throttling: Simulate Slow 3G or Offline network conditions to test page resilience and loading states.</li>
<li>Touch Mode Emulation: Simulate true mobile touch events like swipes and taps while hiding the desktop cursor.</li>
<li>Design Mode: Enable content editing directly within the viewport to test copy changes without modifying your database.</li>
<li>SEO Analyzer: Scan page meta tags, heading structures, and essential SEO attributes instantly.</li>
<li>Color Scheme Emulation: Force system dark or light mode preferences to test CSS media features.</li>
<li>Dedicated Code Inspector: Open a built-in DOM inspector and JavaScript console specifically for the simulated viewport.</li>
</ul>
<h3>Instant Screenshots and Mockup Generator</h3>
<p>Generate professional marketing assets and visual bug reports with one click.</p>
<ul>
<li>Capture high-fidelity PNG screenshots of the current viewport.</li>
<li>Use the batch capture feature to automatically snap screenshots across multiple popular devices simultaneously.</li>
<li>Export designs with transparent backgrounds or custom solid colors using the Mockup Generator.</li>
</ul>


Responsive Checker – SEO and Developer Tools, Device Testing & Mockups

Test website layouts with device preview and viewport tool. Check website accessibility, take screenshots, and run comparisons.

Block Editor Bootstrap Blocks vs Responsive Checker – SEO and Developer Tools, Device Testing & Mockups