Edit column structure

Working with the column structure is quite simple and intuitive thanks to Bootstrap Editor that visualizes all available settings and tools of the Bootstrap framework.

Properly structured content is a key to creating really engaging website pages. Compose your grid with Bootstrap Editor. It provides tools for creating and editing Bootstrap structure blocks such as:


Bootstrap framework is based on 12-column grid system, so each row contains twelve 1/12-width columns or the number of columns with summary width of all columns equal to 100% of the content width on the page. If one line contains more than 12 columns, each group of additional columns wraps to a new line. Therefore, the grid offers flexibility to create various combinations of elements.

All structure elements (container, row, column) are responsive. They collapse to the largest predefined width out of the available ones (from XS to XL). Such widths are called breakpoints and are displayed in the ruler above the content.

To highlight the structure of the content and to see the borders of containers, rows and columns, switch to the Bootstrap Editor Pro mode Bootstrap Editor button or enable highlighting of structure Highlighting structure.

Select Bootstrap column
Bootstrap structure


Container is the main structure entity of your future content in the Bootstrap grid system. It is a wrapper of rows and columns. It also adapts content to the screen size of the given device or viewport.

When you insert any block, you actually insert two containers: the inner one (with content, displayed as Container in breadcrumbs) and the outer one that forms margins around the inner container (displayed as Block in breadcrumbs).

You can specify the background for the container (set a color, a gradient or pick the image in the file manager) — both for the inner area and for the space around it that is a part of the container too. To do this, select the corresponding container in breadcrumbs and click the "Set background" button on the sidebar.

Button Set background screenshot
Press button to set background
Upload image from the server screenshot
Choose image from the server
Set background image file screenshot
Set background image

You can also make the container fluid using the corresponding checkbox. In this case, it will take 100% of width by utilizing the space of margins on each side.

When you use Bootstrap version 4.5 or newer, you can set the width of a container equal to the width of some of breakpoints. The variants are displayed next to the Fluid option, when available.

You can configure each block to display on certain devices only (by default it displays on all devices). For example, you can hide too large non-crucial blocks on narrow screen devices by turning off XS and SM labels.


Row forms horizontal groups of columns and wraps them.

Typically, to insert a new block you need to insert a block, not a row. But if you want to visually merge contents of two neighbouring blocks, for instance, by using the shared background image and smaller margins between blocks, you better insert them as rows inside one container.

Single row in a container
Two rows
in a container
Three rows
in a single
Examples of containers with different number of rows
Rows in a container
Two rows in a container

A row has effect on aligning content of its daughter columns vertically and horizontally (related for Bootstrap 4 and latest versions).

Row horizontal align
Horizontal alignment
Row vertical align
Vertical alignment

Each column has a horizontal padding (gutter) to manage space between them. To visually align column content by the left edge, each row provides negative margins. You can change this behavior by enabling the No gutters option.

Hiding options for rows are also available.

Row with gutters
Default state with gutters
Row without gutters
Removing gutters (horizontal paddings) between column content


Column is the most important structure element of the grid located inside a row. It is here you place your content. Thanks to Bootstrap Editor settings, you can completely redefine the behavior of columns (hide/show/change width depending on breakpoint/offsets/aligning/background).

To do this, switch to the column editing mode (the Column tab in breadcrumbs in the lower part of the editor).

Select Bootstrap column
Bootstrap structure with selected column

Column width

The width of a column defines how much space this column takes inside a row. Here are a few examples:

Example of columns of different widths

Responsive columns

You can redefine columns depending on the screen size (and the corresponding breakpoint). Therefore, you can specify different widths for each column for different devices and also hide or show columns depending on the screen size.

Edit column width
Change column width

As an example, let's take a two-column block and configure it so to make columns take 50% of width on large and medium screens, while on smaller devices make it display as individual lines. To do this, assign the following values to each column:

Column width large and medium screens
Column transformations on small viewport sizes

Learn more on how to get responsive design.

Offsetting columns

Offset is basically the shift of the current column to the right to the width specified on the Offset tab. The width 1 offset is equal to the width of 1/12 column. Just like margin utilities, the offset is used to provide more space between columns of the same nesting level.

Take a look at these examples to see how using offsets allows you to create the column structure you need:

No offset columns
4/12, offset 2
3/12, offset 1
Spaces between columns

You can also reset offsets by clicking the Offset marker next to the corresponding breakpoint.

Column offse
Column 3/12 offset 1


In the Column setting section, there is an option to align columns vertically. This is useful when the content of each column has a different height, and you need, for instance, to center one column relative to another one. To do this, select the column and on the sidebar click one of the switch tabs to apply the desired effect.

Align column center
Vertical alignment of column

To align columns horizontally relative to the wrapping row, switch to Row.