Working with the Grid

Bootstrap Studio is built on top of the Bootstrap framework and one of its most important features is the responsive grid. The app comes with a number of tools that make designing with the grid more productive.

Stage Resize

You can press the buttons on the main toolbar to quickly resize the stage so that you can test the different breakpoint sizes. Also, free resizing and a list of popular devices is also available.

Row and Column Visualization

By constructing your pages with rows and columns, you ensure that they look great on any device. Bootstrap Studio makes this easy by showing you the outlines of these elements.

You can toggle this visualization on or off from the toolbar:

Column Toolbar

When you select a column in Bootstrap Studio, the Column Toolbar pops up. This is a powerful tool which controls the width and offset of columns for the currently active screen size.

Powerful Options

When a column is selected, the Options panel reveals a large number of options that control the width, offset , alignment and order of columns.

Click on the labels to expand the group and reveal all screen sizes. If no value is set for a specific size, the one above it will affect it:

This column will take half the width (6 out of 12) only on MD devices and larger.

Responsive Display

Bootstrap gives us a number of classes for showing or hiding elements depending on screen size. You can see them under the Responsive Display group in the Options panel.

This element will be hidden on MD screens and above.

Breaking Columns to New Rows (Clearfix)

For some layouts, you need to clear columns to a separate row. This is why Bootstrap Studio gives you the Column Helper component. You only need to drag and drop it between two columns and to give it the correct Responsive Display class to limit when it is active.