All Bootstrap Blocks

Create Bootstrap 5 layouts directly in the WordPress editor. Plus choose from over 20 component…

Create Bootstrap 5 layouts directly in the WordPress editor. Plus choose from over 20 component blocks including carousels, modals, buttons and more.

The power of Bootstrap 5 in the WordPress editor

All Bootstrap Blocks is a free WordPress plugin for agencies, freelancers and hobbyists. Speeding up the delivery of WordPress websites by making the Bootstrap 5 framework available directly within the editor. Full documentation is available here.

Watch All Bootstrap Blocks in action.

Features

Examples

Quick and easy Bootstrap customisation

If you’re not a pro developer it can be difficult to customize Bootstrap for your needs. With All Bootstrap Blocks you can quickly and easily manage all of your Bootstrap options directly within the WordPress dashboard without writing a single line of code. Read the full documentation on customisations here.

Implement your own Bootstrap CSS and JS

If you’re plugging All Bootstrap Blocks into an existing site you may already have Bootstrap included in your theme. We’ve made it as easy as clicking a button to turn off our built in Bootstrap options to avoid duplication and give you the flexibility to use Bootstrap your way.

No code needed Bootstrap customisation

If you’d like to avoid code then we have built in the ability to manage all of your Bootstrap options within your WordPress admin. Fill in options by searching the available Bootstrap variables, inputting custom values or using a simple user interface. Bootstrap CSS and JS will automatically be included on your site customised with your options.

20 popular Google fonts to choose from

To make your life easier we have included the 20 most popular Google fonts for you to use within your site. Change the font used across your site in seconds. If you can’t find the font you’re looking for you can always add your own.

Fully responsive layout blocks with live preview

Utilise the Bootstrap grid system directly within the WordPress block editor. All layout blocks display a live preview and give you the power to use the built in Bootstrap utility settings and set specific settings for different size devices. Read the full documentation on layout blocks here.

Strip block

The strip block isn’t a standard in Bootstrap. It’s a block we find incredibly useful though. It’s a full width div that allows you to add a background (color, images and videos) along with an overlay, set height, padding and margin and insert any content you wish. This is the perfect block for creating full width banners or adding background to strips of content.

Container block

Containers are the most basic layout element in Bootstrap and are required when using the default grid system. The All Bootstrap Blocks container block comes with the ability to choose between the default container (sets a max-width at each breakpoint), responsive containers (sets 100% width until the specified breakpoint) and a full width container (sets 100% width at all breakpoints).

Row block

Rows work as wrappers for columns. The row block makes it easy to set uniform column sizing for all inner columns such as vertical and horizontal alignment as well as specifying the number of columns to display per row. All of these settings can be managed for each breakpoint so you can have a completely different layout on mobile vs. desktop.

Column block

Columns work with the Bootstrap 12 column grid and make it possible to create simple or complex layouts that change based on the device size. The column block allows any inner content you wish and has quick settings to manage the horizontal and vertical alignment, offset and ordering of columns.

Column break block

Sometimes you’ll want to force columns to wrap on to a new line. The column break block was built for this. Add a column break to easily reset columns. You can also show or hide column breaks based on device size to provide full control over your layout.

Div block

Bootstrap has loads of useful utility classes to modify layouts however you want. We’ve created a basic <div> block that can hold any inner content you like and the ability to add additional classes to make use of the built in Bootstrap classes. If for any reason the Bootstrap layout components aren’t right for what you need, you can add a div block and customize it however you want.

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. Read the full documentation on component blocks here.

Accordion block

Build vertically collapsing accordions, made up of a header and body. The accordion body can have whatever content you like from headings and paragraphs to images and videos. Control how accordions react to interactions and easily select whether to open an accordion item on page load.

Alert block

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Quickly style alerts by using theme colours, add a custom icon and even include a close button so that users can dismiss the message.

Breadcrumb block

Indicate the current page’s location within a navigational hierarchy. Add the breadcrumb block and we’ll automatically generate a breadcrumb for the current page. Customise your breadcrumbs with dividers.

Button block

Make use of all of Bootstraps predefined button styles with simple settings for changing colours and sizes. You can even add additional functionality to buttons like popovers, tooltips and dropdown menus.

Button group block

Group a series of buttons together on a single line or stack them in a vertical column. Quickly manage sizing of all buttons within the group.

Card block

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options. All Bootstrap Blocks includes blocks for cards, card headers and card footers with full flexibility to add whatever content you like within them. Change the background, text colour and border colour of any card.

Card group block

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.

Carousel block

The All Bootstrap Blocks carousel block gives you the power to create a cycling slideshow with as many slides as you like. Each slide can include whatever content you want. Use the quick settings to change the theme and control whether arrows, indicators or both show. You can even set a custom interval for each slide.

Collapsible content block

The collapsible content block works with buttons and links to show or hide content to the user. You can include any content you want inside the collapsible content block including images, videos and anything else.

List group block

List groups are a flexible and powerful component for displaying a series of content. Each list item can be styled using the theme colours, turned into hyperlinks, marked as active and marked as disabled.

Modal block

Add dialogs to your page and toggle them with links and buttons. Each modal can have a header, footer and body. Each of which can include any content you like. Control the position of the modal, whether it’s scrollable and whether the backdrop should be clickable.

Navs & tabs block

Quickly create navigations within your page using the navs & tabs block. Choose a style for your navigation from Default, Tabs and Pills. Mark each navigation item as active or disabled and specify layout options for each breakpoint.

Offcanvas block

Build hidden sidebars into your project for navigation, shopping carts, and more. Toggle offcanvas blocks with links and buttons to display whatever content you like. Choose the offcanvas placement (from top, right, bottom and left), specify whether there should be a backdrop and whether the body should be scrollable.

Progress bar block

Add progress bars directly in your page and use your own JS to control them. You can quickly style progress bars with theme colours, add labels, include stripes and even animate them.

Spinner block

Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript. Quickly customise spinner styles, colours and sizes directly in the editor.

Toast block

Toasts are lightweight notifications designed to mimic the push notifications that have been popularised by mobile and desktop operating systems. Toggle toasts with links and buttons. Customise the header, content, colour and placement of toasts on a page.

  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.

  1. Automatically include Bootstrap or include your own version

    Automatically include Bootstrap or include your own version

  2. Manage all of your Bootstrap settings in the dashboard

    Manage all of your Bootstrap settings in the dashboard

  3. Create responsive layouts directly in the editor

    Create responsive layouts directly in the editor

  4. Choose from over 20 component blocks (Carousels)

    Choose from over 20 component blocks (Carousels)

  5. Choose from over 20 component blocks (Modals)

    Choose from over 20 component blocks (Modals)

  6. Choose from over 20 component blocks (Accordions)

    Choose from over 20 component blocks (Accordions)