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
- Column Break.
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
- Button group.
- Card group.
- Collapsible content.
- List group.
- Navs & tabs.
- Progress bar.
- + 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
- 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.
這個外掛提供 59 個可供 Gutenberg/區塊編輯器使用的區塊。
- Content with Items
- Post Details
- Call to Action
- Next and Previous
- Content with Media
- 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.
- Icon Choose from 1600 Bootstrap icons.
- 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.
- 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.
- Upload the
all-bootstrap-blocksdirectory into the
- Activate the plugin through the
Pluginsmenu in WordPress
- 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?
以下人員參與了開源軟體〈All Bootstrap Blocks〉的開發相關工作。參與者
- FIX: Notice displays for missing widgets
- FIX: Widgets and reuseable blocks not displaying styles correctly
- FIX: Missed reusabel block code
- FEATURE: Made lightspeed block settings available
- FIX: Strip block returns error and cannot be previewed
- UPDATE: Added blocks to be used with Lightspeed theme
- FIX: When trying to add a background block errors
- 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
- 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
- FEATURE: Added align to strip, container and carousels
- FEATURE: Added breakpoints and container max-widths to available settings
- FIX: ScssPHP conflicting with other plugins
- FEATURE: Added Reset All to Bootstrap settings
- FIX: Forcing max-width to 100% on all WordPress blocks
- FEATURE: Added icons to buttons
- FIX: Open in new tab not working on a number of blocks
- Fix: Carousel doesn’t auto scroll
- 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
- 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
- FEATURE: Added icon block
- FEATURE: Added strip blocks (in beta)
- FIX: Size option missing from modal block
- FIX: Auto complete Bootstrap classes not working within sub directory setup
- 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
- FIX: Accented characters formatting incorrectly within the carousel block
- FIX: AREOI specific classes impacting other theme styles
- 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
- 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.
- 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.