Search
Layouts
Fully responsive layout blocks with a 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.
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.
Content within a full width strip.
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).
.container-fluid
.container-xxl
.container-xl
.container-lg
.container
.container-md
.container-sm
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.