Block Editor Bootstrap Blocks

Description

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

  • Option to load Bootstrap 5 css to editor from plugin if your theme doesn’t contain it
  • Option to load Bootstrap 5 to frontent from plugin if your theme doesn’t contain it
  • Bootstrap row block

    • Use quick selector to instantly select row while editing
    • Use predefined layouts
    • Generate custom layout instantly just by adding columns counts, eg. 2+8+2
    • Use any amount of columns
    • Use 6 different breakpoints to setup:

      • Vertical alignment (align-items-*)
      • Horizontal alignment (justify-content-*)
      • Gutter (g-*)
      • Row columns (row-columns-*)
  • Bootstrap column block

    • Use quick selector to instantly select column while editing
    • Use 6 different breakpoints to setup:

      • Size (col-*)
      • Offset (offset-*)
      • Order (order-*)
      • Vertical alignment (align-self-*)
  • Bootstrap accordion block

    • Two styles – default and flush
    • Always open option
    • First open on load option
    • Unlimited amount of accordion items
    • Unlimited accordion item inner blocks content
  • Bootstrap tabs block

    • Three styles – tabs, pills and text
    • Possibility to reorder tabs
    • Possibility to add and remove tabs
    • Unlimited amount of tabs items
    • Unlimited tab item inner blocks content
  • Component for margin and padding Spacing for any block for 6 different breakpoints
  • Component for Display visibility – display per breakpoints, print display, logged in/out display
  • Component for Snapping for group block, so you can push some content out of container (or just background)
  • Component for Alignment, so you can align your text to the left for PC but to the center for mobile
  • Component for autocomplete Bootstrap classes
  • Extended formats – uppercase, capitalize, lowercase, stretched-link, mark, non-breaking space (nbsp) and soft-hypen (shy) inserter
  • Extended shortcuts – shift+alt+[1..7] to switch between paragraph and headings levels – same as in classic editor (tinymce wysiwyg)

Screenshots

Installation

  1. Upload the plugin files to the /wp-content/plugins/ directory, or install the plugin through the WordPress plugins screen directly.
  2. Activate the plugin through the ‘Plugins’ screen in WordPress

Reviews

There are no reviews for this plugin.

Contributors & Developers

“Block Editor Bootstrap Blocks” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

1.2

  • new display property extension – display per breakpoints, print display, logged in/out display
  • new text format uppercase
  • new text format lowercase
  • new text format capitalize
  • new text format stretched link
  • new toolbar button for Nonbreaking space
  • new toolbar button for Soft hyphen
  • move left/right controls for tabs
  • global shortcuts shift+alt+[1..7] to switch between paragraph and headings levels – same as in classic editor (tinymce wysiwyg)

1.1

  • new Alignment controls
  • new Accordion block
  • new Tabs block
  • fix snapping in editor
  • load bootstrap css earlier in the editor, so it will not override user editor styles
  • fix media queries order for Spacing in editor
  • replace cover block and group block inner container with bootstrap container
  • optimize JS code
  • tested on WP 5.8

1.0

  • Release