Working with the Grid

The grid is the most important Bootstrap feature and the most misunderstood part of the framework by beginners. It is crucial for building responsive web pages and defining how they scale depending on the screen size of the device.

Bootstrap Studio embraces the responsive grid and makes you more productive with a number of time-savers.

Quick Stage Resize

You can press the buttons on the main toolbar to quickly resize the stage so that it matches the sizes of the grid. This way you can test and iterate on your designs faster.

Row and Column Visualization

Bootstrap Studio shows you the outlines of rows and columns, which helps you when you are editing your layout.

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.

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.