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:
Grid
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 
or enable highlighting of structure 
.
Container
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.
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
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.
A row has effect on aligning content of its daughter columns vertically and horizontally (related for Bootstrap 4 and latest versions).
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.
Column
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).
Column width
The width of a column defines how much space this column takes inside a row. Here are a few examples:
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.
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:
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:
You can also reset offsets by clicking the Offset marker next to the corresponding breakpoint.
Alignment
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.
To align columns horizontally relative to the wrapping row, switch to Row.