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.
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.
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.
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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
all-bootstrap-blocksdirectory into the
Pluginsmenu in WordPress
All Bootstrap Blocks supports Bootstrap version 5.
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.
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)