mindspun

mattlaue

<p>Mindspun Responsive Blocks empowers users to create fully-responsive layouts using lightweight blocks.<br />
It consists of easy-to-use blocks like container, image, heading, paragraph, tab, and button block that allows users to specify distinct styling for desktop, tablet, and mobile views.</p>
<h4>Blocks Included</h4>
<ul>
<li>Heading – Create headings in a range of sizes with precise margins, padding and text appearance including font styles, colors, and alignment options.</li>
<li>Paragraph – Create body text match your design preferences with font sizes, various appearance options and one-click letter case styles.</li>
<li>Buttons – Create and style buttons for any screen size with primary, outline and link button types.   You can even customize the hover state.</li>
<li>Image – Show different images and/or sizes for different screens.</li>
<li>Grid – Easily create responsive layouts using a 12-point grid system.</li>
<li>Container – Advanced block allowing the user to crete any flex-based layout they choose.</li>
<li>Link Group – Turns any collection of blocks into a link.</li>
<li>Tabs – Structure and present information in a tabular format.   Highly customizable to create any desired tabbed layout.</li>
<li>Show/Hide – Conditionally show inner blocks based on event.   Select from a slide or flip transition styles.</li>
</ul>
<h4>Key Features</h4>
<ul>
<li>Easy-to-use configuration options that are separately applied to desktop, tablet and mobile.</li>
<li>Works like a responsive version of core blocks making them quick to learn.</li>
<li>Lightweight, modern design to creating any layout without the bloat of a page-builder.</li>
<li>All blocks are <a href="https://developer.wordpress.org/block-editor/getting-started/glossary/#static-block" rel="nofollow ugc">static blocks</a> to ensure optimal performance.</li>
<li>Allows optional per-block custom CSS with media queries automatically applied for advanced use cases.</li>
</ul>
<h4>Source files</h4>
<p><a href="https://github.com/getmindspun/wordpress-responsive-blocks" rel="nofollow ugc">GitHub</a></p>
<h4>Support</h4>
<p>For any assistance or inquiries, contact us at support@mindspun.com or visit our <a href="https://m.facebook.com/groups/mindspun/" rel="nofollow ugc">Facebook Community Group</a>.<br />
Issue may be submitted via <a href="https://github.com/getmindspun/wordpress-responsive-blocks/issues" rel="nofollow ugc">GitHub</a></p>


Mindspun Responsive Blocks

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

Mindspun Responsive Blocks vs Block Editor Bootstrap Blocks