All Bootstrap Blocks

外掛說明

Create fully responsive Bootstrap 5 page layouts. 37 free blocks including containers, rows, columns, modals, accordions, cards, buttons and much more.

All Bootstrap Blocks is 100% free

Introducing All Bootstrap Blocks. The fastest and most simple way to create fully responsive Bootstrap 5 layouts directly in the WordPress editor with a live preview! Plus we’ve included blocks for all of the Bootstrap components, including modals, accordions, cards and much more.

It’s time for All Bootstrap Blocks.

Quick and easy Bootstrap customisation

All Bootstrap Blocks automatically includes both the Bootstrap CSS and JS, and provides a simple to use interface for managing all of your Bootstrap settings… without coding. Easily setup your colours, fonts, spacing and everything else. If you want more control over Bootstrap you can simply turn this feature off and include your own Bootstrap files.

Check out all of the available customisations.

Fully responsive layout blocks with live preview

Build responsive, mobile-first layouts directly in the WordPress editor with a live preview. All layout blocks allow you to set device specific settings across 6 different breakpoints and include all of the Bootstrap settings like alignment, ordering and much more without needing to write a single line of code.

Check out all of the available layout blocks.

6 responsive layout blocks

  • Strip.
  • Container.
  • Row.
  • Column.
  • Column Break.
  • Div.

20+ Bootstrap component blocks

We’ve created blocks for all of the Bootstrap components from accordions and modals to buttons and cards. All blocks preview directly in the block editor, work seamlessly with other WordPress blocks and have loads of options so you can tailor them to your needs.

Check out all of the available components.

20+ component blocks

  • Accordion.
  • Alert.
  • Breadcrumb.
  • Button.
  • Button group.
  • Card.
  • Card group.
  • Carousel.
  • Collapsible content.
  • List group.
  • Modal.
  • Navs & tabs.
  • Offcanvas.
  • Progress bar.
  • Spinner.
  • Toast.
  • + much more

**NEW** 1,600+ Bootstrap icons

We’ve created a NEW icon block that provides access to over 1,600 high quality Bootstrap icons with the ability to add them directly in to the block editor.

Check out all of the available icons.

**NEW** 5 prebuilt layout blocks (BETA)

We’ve just released 5 prebuilt layout blocks so you can create full pages in seconds. Under the hood all of these blocks utilise the functionlaity that Bootstrap provides and make it easy to overlay your own styles to make them unique.

5 prebuilt strip blocks

  • Banner.
  • Content with Media.
  • Content Grid.
  • Post Grid.
  • Media Grid.

Full documentation available

We have pulled together full, in-depth documentation explaining how to use every one of our custom blocks.

You can read the full documentation here.

If you have any questions or are unsure about how something works then please don’t hesitate to reach out to us on our support forum here.

螢幕擷圖

  • Automatically include Bootstrap or include your own version
  • Manage all of your Bootstrap settings in the dashboard
  • Create responsive layouts directly in the editor
  • Choose from over 20 component blocks (Carousels)
  • Choose from over 20 component blocks (Modals)
  • Choose from over 20 component blocks (Accordions)

適用於區塊編輯器

這個外掛提供 59 個可供 Gutenberg/區塊編輯器使用的區塊。

  • Content with Items
  • Posts
  • Post Details
  • Footer
  • Contact
  • Call to Action
  • Next and Previous
  • Hero
  • Content with Media
  • Search
  • Header
  • Media
  • Logos
  • Content Grid Choose from 2 different grid layouts to display your content.
  • Breadcrumb Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
  • List Group List groups are a flexible and powerful component for displaying a series of content.
  • Column Break Breaking columns to a new line in flexbox requires a small hack: add an element with width: 100% wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple .rows, but not every implementation method can account for this.
  • Post Grid Choose from 2 different grid layouts to display your posts.
  • Nav and Tabs Navigation available in Bootstrap share general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style.
  • Accordion Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.
  • Icon Choose from 1600 Bootstrap icons.
  • Spinner Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.
  • Offcanvas Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.
  • Collapse The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle.
  • Container Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport.
  • Media Grid Display multiple medias in a rich gallery.
  • Button Group Group a series of buttons together on a single line or stack them in a vertical column.
  • Tabs Create tabbed content that will show / hide based on the relevant tab being clicked.
  • Carousel A slideshow component for cycling through elements—images or slides of text—like a carousel.
  • Button Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
  • Card Group Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint.
  • Progress Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them.
  • Content with Media Display headings, paragraphs and more alongside an image or video.
  • Column Modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system.
  • Div The Div block creates a <div> element with the ability to add whatever classes you want. This is great for building more complex custom layouts that utilise utility and helper classes provided by Bootstrap.
  • Alert Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
  • Strip Full width strip allowing background colours, images and videos.
  • Card Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
  • Modal Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
  • Row Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows.
  • Banner Choose from 3 different banner layouts with background images and videos.
  • Toast Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
  • Offcanvas Header Add an optional header within an offcanvas.
  • Toast body The building block of a toast is the .toast-body. Use it whenever you need a padded section within a toast.
  • Toast Header Add an optional header within an toast.
  • Dropdown Item Add as many dropdown items to a dropdown as you would like. Add an <a> tag with a Link. Add a header to label sections of actions in any dropdown menu. Separate groups of related menu items with a divider. Place any freeform text within a dropdown menu with text.
  • Card Header Add an optional header within a card.
  • List Group Item Add list group items to a list group. If a URL is set then the item will be an <a> tag otherwise it will be a <div>.
  • Modal body The building block of a modal is the .modal-body. Use it whenever you need a padded section within a modal.
  • Offcanvas body The building block of an offcanvas is the .offcanvas-body. Use it whenever you need a padded section within a offcanvas.
  • Card body The building block of a card is the .card-body. Use it whenever you need a padded section within a card.
  • Nav & Tab Item Add multiple items to your nav.
  • Content Grid Item Add individual grid items within a content grid.
  • Card Footer Add an optional footer within a card.
  • Accordion Item Add individual accordion items within an accordion.
  • Modal Footer Add an optional footer within a modal.
  • Banner Item Add individual banner items within a banner.
  • Modal Header Add an optional header within a modal.
  • Carousel Item Add as many carousel items to a carousel as you wish. Each carousel item can have different layouts and content.

安裝方式

  1. Upload the all-bootstrap-blocks directory into the /wp-content/plugins/ directory
  2. Activate the plugin through the Plugins menu in WordPress
  3. Start adding blocks

常見問題集

Which versions of Bootstrap are supported?

All Bootstrap Blocks supports Bootstrap version 5.

Is Bootstrap included?

Bootstrap is included. However you have the ability to switch this off in your WordPress dashboard if you would like to include your own version of Bootstrap. Read the documentation here.

Do you want to suggest a feature or report a bug?

Please add any feature requests or bugs within the support section.

使用者評論

2022 年 8 月 3 日 1 reply
Hands down the best integration I've seen with Bootstrap and Gutenberg. Loving the additional features that have been added along the way, and look forward to seeing it grow/evolve!
2022 年 7 月 10 日 1 reply
If you're opting for a set of blocks, All Bootstrap Blocks by AREOI is a powerful choice. Because: 1) The plugin developer provides a professional and fast support service. 2) Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world. This project will not die in a couple of years. 3) Bootstrap is the industry standard. Too many sites are built on the Bootstrap framework, so trustworthy WP plugin developers tend to make sure their code doesn't conflict with Bootstrap. 4) The widest range of components covers 99% of your needs. You don't need a dozen plugins. Bootstrap is like a Swiss Army knife. All-in-one essentials. 5) The All Bootstrap Blocks plugin gives you full control over all the styles so that they match the styles of your favorite themes. 6) Now the main thing. If you intend to copy content from one site to another, you need to take care that the blocks are independent of the theme framework. And block settings should also be ready for migration. All Bootstrap Blocks plugin settings can be backed up so you can deploy them to other sites. Thanks to Bootstrap, the page code remains clean. In Code Editor mode, code is easy to read, edit, and copy for pasting into another page or site. 7) If your site is all about content and not form, you don't need pagebuilders, you don't need tons of tweaks to tune every block on every page. No junk = Superfast sites! The All Bootstrap Blocks plugin is as reliable as the Legendary AK-47 Assault Rifle.
2022 年 4 月 18 日 1 reply
I really hope this project flourishes. I plan to base my WordPress theme development on it. Transforms WordPress into a Bootstrap paradise. You folks need to get the word out!
閱讀全部 10 則使用者評論

參與者及開發者

以下人員參與了開源軟體〈All Bootstrap Blocks〉的開發相關工作。

參與者

將〈All Bootstrap Blocks〉外掛本地化為台灣繁體中文版

對開發相關資訊感興趣?

任何人均可瀏覽程式碼、查看 SVN 存放庫,或透過 RSS 訂閱開發記錄

變更記錄

1.2.14

  • FIX: Notice displays for missing widgets

1.2.13

  • FIX: Widgets and reuseable blocks not displaying styles correctly
  • FIX: Missed reusabel block code
  • FEATURE: Made lightspeed block settings available

1.2.12

  • FIX: Strip block returns error and cannot be previewed

1.2.11

  • UPDATE: Added blocks to be used with Lightspeed theme

1.2.10

  • FIX: When trying to add a background block errors

1.2.9

  • FEATURE: Enabled Bootstrap imports to be excluded from compiled CSS
  • FEATURE: Added custom alignment controls to allow Wide and Full width to be selected in child blocks
  • FEATURE: Added tabs block to anable tabbed content
  • FIX: Bootstrap settings revert on dectivate / reactivate

1.2.8

  • FIX: Make Strip block full width aligned as default
  • FEATURE: Added utility classes for bg, text and border to strip, container, div and column blocks
  • FEATURE: Added Bootstrap theme colors to background color picker

1.2.7

  • FEATURE: Added align to strip, container and carousels

1.2.6

  • FEATURE: Added breakpoints and container max-widths to available settings

1.2.5

  • FIX: ScssPHP conflicting with other plugins
  • FEATURE: Added Reset All to Bootstrap settings

1.2.4

  • FIX: Forcing max-width to 100% on all WordPress blocks
  • FEATURE: Added icons to buttons

1.2.3

  • FIX: Open in new tab not working on a number of blocks
  • Fix: Carousel doesn’t auto scroll

1.2.2

  • FEATURE: Enabled exporting and importing All Bootstrap Blocks settings
  • UPDATE: Made compatible with WPML translator
  • FIX: PHP notice displaying on 404 page
  • FIX: Updated default value to array for post grid > post_ids
  • FIX: Removed additional class being added to post grid block

1.2.1

  • UPDATE: Allow up to 6 columns on post grid / content grid
  • FIX: Change card sizes to use min-height instead of height
  • FIX: Make sure prepend title overlays any backgrounds that are added
  • FIX: Post grid has rogue which is closing page up
  • FIX: Changing banner size doesn’t update size on the front end
  • FIX: Pagination not working – doesn’t go to page 2 etc
  • FIX: Include max_execution time in compiling of Bootstrap to make sure there is enough time to finish ini_set(‘max_execution_time’, ‘300’);
  • UPDATE: Update media grid to use php to render front end view and make sure it matches formatting in Builder
  • FIX: Change screenshot for icon block and add screenshot for media grid
  • UPDATE: Allow images to be cover or inline – media grid / content grid
  • UPDATE: Allow height to be set if inline selected – media grid / content grid
  • UPDATE: Allow selection of custom post types within post grid
  • UPDATE: Allow max height and width on media images and content grid images
  • UPDATE: Add Extra small to media size for content grid images container
  • FIX: Content grid not going the full width

1.2.0

  • FEATURE: Added icon block
  • FEATURE: Added strip blocks (in beta)

1.1.2

  • FIX: Size option missing from modal block

1.1.1

  • FIX: Auto complete Bootstrap classes not working within sub directory setup

1.1.0

  • FEATURE: Added quick search for Bootstrap classes above additional classes field
  • FEATURE: Enabled control over where All Bootstrap Blocks css gets added to page
  • FEATURE: Added custom icons to each block
  • FEATURE: Enabled using theme.json to populate Bootstrap settings
  • FEATURE: Enabled block templates to be overridden in theme

1.0.5

  • FIX: Accented characters formatting incorrectly within the carousel block

1.0.4

  • FIX: AREOI specific classes impacting other theme styles

1.0.3

  • FIX: Background colour not showing when not using included Bootstraps
  • FIX: Background videos not auto playing if they have sound
  • FIX: Colour not pre-selected for background
  • FIX: Not able to click the bottom block within a column

1.0.2

  • When upgrdaing the plugin to a new version the compiled scss was being changed. We have added in functionality to re compile all bootstrap files after upgrade.

1.0.1

  • With the option to hide the core button and column blocks, blocks from other plugins were being hidden. We have updated the functionality to only excluded the selected blocks and made sure no other plugins are impacted by our code.