liip

tschortsch

<p>Bootstrap Gutenberg Blocks for WordPress. This plugin adds Bootstrap components and layout options as Gutenberg blocks.</p>
<h4>Features</h4>
<ul>
<li>Supports Bootstrap v5 and v4</li>
<li>Support for CSS grid (experimental)</li>
<li>Fully customizable with filters</li>
<li>Configuration via option page or programmatically with constants</li>
<li>Block templates can be overwritten in your theme</li>
</ul>
<p>The full documentation of this plugin can be found on GitHub: <a href="https://github.com/tschortsch/bootstrap-blocks-wordpress-plugin#readme" rel="nofollow ugc">https://github.com/tschortsch/bootstrap-blocks-wordpress-plugin#readme</a></p>
<h4>Available Blocks</h4>
<p><strong>Container</strong></p>
<p>Options:</p>
<ul>
<li>Fluid: If enabled the container will use the full available width, spanning the entire width of the viewport.</li>
<li>Fluid Breakpoint: Used to enable <a href="https://getbootstrap.com/docs/4.4/layout/overview/#responsive" rel="nofollow ugc">responsive containers</a>. This feature only works with Bootstrap v4.4+. The container will use 100% of the width until the specified breakpoint is reached, after which the defined max-widths will apply for each of the higher breakpoints.</li>
<li>Margin After: Define a margin which should be added after the container.</li>
</ul>
<p><strong>Row</strong></p>
<p>Options:</p>
<ul>
<li>Template: Choose from a predefined template for the inner <code>column</code> blocks.</li>
<li>No Gutters: Disable gutters between columns.</li>
<li>Alignment: Horizontal alignment of inner <code>column</code> blocks.</li>
<li>Vertical Alignment: Vertical alignment of inner <code>column</code> blocks.</li>
<li>Editor stack columns: Displays stacked columns in the editor to enhance readability of block content.</li>
<li>Horizontal Gutters: Size of horizontal gutters.</li>
<li>Vertical Gutters: Size of vertical gutters.</li>
<li>CSS Grid Gutters: Size of gutters when CSS grid is used.</li>
</ul>
<p><strong>Column</strong></p>
<p>Options:</p>
<ul>
<li>Sizes for all breakpoints (xxl, xl, lg, md, sm, xs): How much space the column should use for the given breakpoint.</li>
<li>Equal width for all breakpoints (xxl, xl, lg, md, sm, xs): If enabled column will spread width evenly with other columns.</li>
<li>Background Color: Set background color to column.</li>
<li>Content vertical alignment: Align content vertically in column. This option is only needed if a background color is set. Otherwise use the <strong>Alignment</strong> option of the outer <code>row</code> block.</li>
<li>Padding: Define padding inside the column.</li>
</ul>
<p><strong>Button</strong></p>
<p>Options:</p>
<ul>
<li>Style: Choose the styling of the button.</li>
<li>Open in new tab: Choose if link should be opened in a new tab.</li>
<li>Rel: Set rel attribute of the link.</li>
<li>Alignment: Horizontal alignment of the button.</li>
</ul>
<h4>Supported Bootstrap versions</h4>
<p>This plugin supports Bootstrap v4 and v5.</p>
<p>The version can be selected in the plugin settings (Settings > Bootstrap Blocks) or by defining the <code>WP_BOOTSTRAP_BLOCKS_BOOTSTRAP_VERSION</code> constant in the <code>wp-config.php</code> file:</p>
<ul>
<li>Bootstrap 4: <code>define( 'WP_BOOTSTRAP_BLOCKS_BOOTSTRAP_VERSION', '4' );</code></li>
<li>Bootstrap 5 (default): <code>define( 'WP_BOOTSTRAP_BLOCKS_BOOTSTRAP_VERSION', '5' );</code></li>
</ul>
<p>Possible values right now are <code>'4'</code> or <code>'5'</code>. By default Bootstrap version <strong>5</strong> is selected.</p>
<h4>CSS Grid</h4>
<p>The <a href="https://getbootstrap.com/docs/5.1/layout/css-grid/" rel="nofollow ugc">CSS grid</a> (supported with Bootstrap >= 5.1.0) can be enabled in the plugin settings (Settings > Bootstrap Blocks) or by defining the <code>WP_BOOTSTRAP_BLOCKS_ENABLE_CSS_GRID</code> constant in the <code>wp-config.php</code> file:</p>
<p>eg. <code>define( 'WP_BOOTSTRAP_BLOCKS_ENABLE_CSS_GRID', true );</code></p>
<p>When the CSS grid is enabled the <code>row</code> and the <code>column</code> blocks will use custom templates for the rendering process:</p>
<ul>
<li>Row: <code>row-css.grid.php</code></li>
<li>Column: <code>column-css-grid.php</code></li>
</ul>
<p>The support is still experimental since it’s also marked as experimental in the Bootstarp library. Please read the official <a href="https://getbootstrap.com/docs/5.1/layout/css-grid/" rel="nofollow ugc">Bootstrap documentation</a> to get more information on how to use it.</p>
<h4>Bootstrap library</h4>
<p>Please be aware that this plugin does not include the Bootstrap library in your website. You need to do this by yourself. We decided not to include the library so that you can modify Bootstrap to your own needs before loading it.</p>
<p>You’ll find an example how to include it in your theme’s <code>functions.php</code> in the <a href="https://github.com/tschortsch/bootstrap-blocks-wordpress-plugin#bootstrap-library" rel="nofollow ugc">documentation</a>.</p>
<h4>Templates</h4>
<p>All blocks are implemented as <a href="https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/block-tutorial/creating-dynamic-blocks/" rel="ugc">dynamic blocks</a>. This makes it possible to overwrite the template of a block in your theme.</p>
<p>To overwrite a block template create a folder called <code>wp-bootstrap-blocks/</code> in your theme directory. You can copy the original template from <code>wp-bootstrap-blocks/src/templates/<blockname>.php</code> as a starting point and adjust it to your needs.</p>
<h4>Requirements</h4>
<ul>
<li>WordPress >= 5.0</li>
<li>PHP >= 5.6</li>
</ul>
<h4>Further Information</h4>
<ul>
<li>Documentation: <a href="https://github.com/tschortsch/bootstrap-blocks-wordpress-plugin#readme" rel="nofollow ugc">https://github.com/tschortsch/bootstrap-blocks-wordpress-plugin#readme</a></li>
<li>WordPress Plugin: <a href="https://wordpress.org/plugins/wp-bootstrap-blocks" rel="ugc">https://wordpress.org/plugins/wp-bootstrap-blocks</a></li>
<li>GitHub Repository: <a href="https://github.com/tschortsch/bootstrap-blocks-wordpress-plugin" rel="nofollow ugc">https://github.com/tschortsch/bootstrap-blocks-wordpress-plugin</a></li>
<li>Changelog: <a href="https://github.com/tschortsch/bootstrap-blocks-wordpress-plugin/releases" rel="nofollow ugc">https://github.com/tschortsch/bootstrap-blocks-wordpress-plugin/releases</a></li>
<li>Issue tracker: <a href="https://github.com/tschortsch/bootstrap-blocks-wordpress-plugin/issues" rel="nofollow ugc">https://github.com/tschortsch/bootstrap-blocks-wordpress-plugin/issues</a></li>
</ul>


Bootstrap Blocks

Very good plugin for providing container, row and column functionality for custom Bootstrap themes (my use-case). This is so much better than the default Wordpress columns. Just what I was looking for. Thanks for the plugin. :)

So useful! Please keep up the good work!

Bootstrap Gutenberg Blocks for WordPress. This plugin adds Bootstrap components and layout options as Gutenberg blocks.

Paolo

AyeCode

Stiofan

<p>BlockStrap Page Builder — Bootstrap Blocks gives you a selection of Bootstrap blocks that let you craft a whole site, including a header, footer, and even menus.</p>
<p>This plugin, combined with the <a href="https://wordpress.org/themes/blockstrap/" rel="ugc">BlockStrap theme</a>, effortlessly turbocharges your website’s loading speed.</p>
<p>BlockStrap: The Ultimate BootStrap Page Builder for WordPress</p>
<p>Transform your WordPress website with BlockStrap, the ultimate page builder plugin that brings the power of the Bootstrap CSS framework to your fingertips.</p>
<h3>Why Choose BlockStrap?</h3>
<p>BlockStrap is not just a plugin; it’s a complete page builder that gives you the freedom to create any type of theme. It integrates seamlessly with the WordPress block editor, providing a wide range of fully customizable blocks that are easy to use.</p>
<h3>Build Anything with BlockStrap</h3>
<p>Whether you’re building a blog, a Directory, an e-commerce store, a portfolio, or a business website, BlockStrap has got you covered. With over 30+ unique blocks, you can create anything from stylish navigation bars and responsive image galleries to dynamic accordions and interactive maps.</p>
<h3>BlockStrap Free Child Themes</h3>
<ul>
<li><a href="https://wordpress.org/themes/directory/" rel="ugc">Directory Theme</a> – Built for our plugin <a href="https://wordpress.org/plugins/geodirectory" rel="ugc">GeoDirectory</a>, this is the best free <a href="https://wordpress.org/themes/directory/" rel="ugc">WordPress directory theme</a> you will find on WordPress.org.</li>
<li><a href="https://wpgeodirectory.com/downloads/real-estate-directory-theme/" rel="nofollow ugc">Real Estate Theme</a> – Designed specifically for our GeoDirectory plugin, this is the top free WordPress Real Estate theme available. When used alongside the free <a href="https://wpgeodirectory.com/downloads/real-estate-directory/" rel="nofollow ugc">Real Estate Directory add-on </a>, for GeoDirectory, it puts premium real estate themes to shame.</li>
<li><a href="https://wpgeodirectory.com/downloads/job-board-theme/" rel="nofollow ugc">Job Board Theme</a> Seamlessly integrated with GeoDirectory, this theme offers a robust platform for managing and showcasing job opportunities. Whether running a local job board or a large-scale employment site, the Job Board Theme ensures a professional look and smooth user experience.</li>
<li><a href="https://wordpress.org/themes/school/" rel="ugc">School Child Theme</a> Build a professional-looking educational website with the free School Child Theme for Blockstrap. Tailored for academic institutions, this theme provides a clean, user-friendly design that enhances the online presence of schools and educational programs. Fully compatible with the Blockstrap framework, the School Child Theme offers seamless functionality and a professional aesthetic to engage students, parents, and educators alike.</li>
</ul>
<p>Many more BlockStrap Child themes are in the pipeline. We aim to release at least 1 per month.</p>
<h3>Blockstrap Blocks</h3>
<h3>BS > Archive Actions</h3>
<p>This block, perfect for blogs and news sites, allows you to add category selectors and sort options to archive pages.</p>
<h3>BS > Archive Title</h3>
<p>Display your archive titles stylishly and professionally.</p>
<h3>BS > Breadcrumb</h3>
<p>Improve your site navigation with this breadcrumb block.</p>
<h3>BS > Button</h3>
<p>Create stylish and responsive buttons that are highly customizable.</p>
<h3>BS > Container</h3>
<p>This block allows you to create responsive containers for your content. It also doubles as row, column and card blocks.</p>
<h3>BS > Counter</h3>
<p>Display numbers dynamically and engagingly with this counter block.</p>
<h3>BS > Gallery</h3>
<p>Showcase your images in a beautiful and responsive gallery.</p>
<h3>BS > Heading</h3>
<p>Create headings that stand out and match your theme.</p>
<h3>BS > Icon Box</h3>
<p>Add icons to your site with this easy-to-use block.</p>
<h3>BS > Image</h3>
<p>Display your images in a stylish and responsive manner.</p>
<h3>BS > Map</h3>
<p>Add interactive maps to your site with this block.</p>
<h3>BS > Nav</h3>
<p>Create a responsive navigation menu for your site.</p>
<h3>BS > Nav Dropdown</h3>
<p>Add dropdown menus to your navigation with this block.</p>
<h3>BS > Nav Item</h3>
<p>Add individual items to your navigation menu.</p>
<h3>BS > Navbar</h3>
<p>Create a stylish and responsive navigation bar.</p>
<h3>BS > Navbar Brand</h3>
<p>Display your brand/logo in your navigation bar with this block.</p>
<h3>BS > Pagination</h3>
<p>Improve your site navigation with this pagination block.</p>
<h3>BS > Post Excerpt</h3>
<p>Display post excerpts stylishly and engagingly.</p>
<h3>BS > Post Info</h3>
<p>Showcase your post info with this block, including author, dates, comments, reading time, etc.</p>
<h3>BS > Post Title</h3>
<p>Display your post titles stylishly and professionally.</p>
<h3>BS > Search</h3>
<p>Add a search function to your site with this block.</p>
<h3>BS > Shape Divider</h3>
<p>Add stylish dividers to your site with this block.</p>
<h3>BS > Share</h3>
<p>Make it easy for your visitors to share your content with this social share block.</p>
<h3>BS > Skip Links</h3>
<p>Improve your site accessibility with this skip links block.</p>
<h3>BS > Tab</h3>
<p>Create tabs for your content with this block.</p>
<h3>BS > Tabs</h3>
<p>Organize your content in a stylish and responsive tabs layout.</p>
<h3>BS > Accordion</h3>
<p>Display your content in a dynamic accordion layout.</p>
<h3>BS > Accordion Item</h3>
<p>Add individual items to your accordion with this block.</p>
<h3>BS > Contact Form</h3>
<p>Add a simple and easy contact form to your site with this block.</p>
<h3>BS > Rating</h3>
<p>Add star rating icons to your posts. (can also be used to output GeoDirectory post ratings)</p>
<h3>BS > Scroll Top</h3>
<p>Add a button to the page so users can scroll back to the top of the page easily.</p>
<h3>BS > Modal</h3>
<p>Add a modal (popup) to the page containing any content.</p>
<h3>BS > Offcanvas</h3>
<p>Add an Offcanvas element to the page containing any content.</p>
<h3>BS > Alert</h3>
<p>Add an Alert element to the page to show important information.</p>
<h3>BS > Headline</h3>
<p>Add an animated headline to your site, this supports highlight and animations.</p>
<h3>Get BlockStrap Today!</h3>
<p>Take your WordPress site to the next level with the BlockStrap plugin. Experience the power of Bootstrap in your WordPress block editor today!</p>


BlockStrap Page Builder – Bootstrap Blocks

BlockStrap Page Builder - Bootstrap Blocks combines Bootstrap's power with the block editor's versatility.

Bootstrap Blocks vs BlockStrap Page Builder – Bootstrap Blocks