Grid Layout

Bootstrap grid layout information that can be applied to layout areas where column settings are available.

https://getbootstrap.com/docs/4.0/layout/grid/

By default, layouts and templates are pre-configured to achieve what is required for the design. These can be overwritten by bootstrap classes as required.

When to use Bootstrap columns 

Each layout has a setting which allows you to customise the Bootstrap columns, for example on the 100% layout, you can update the Bootstrap column to col-12 (12 columns on mobile) col-md-10 (10 columns on tablet) col-lg-8 (8 columns on desktop). You can then centre/ offset the columns at each breakpoint to customise the design. For example offset-md-1 offset-lg-2, would move the layout 1 column left on tablet and 2 columns left on desktop. 

Breakpoints

Waterlogic design has more breakpoints that Bootstrap which means you have finer grain control over screen widths: 

breakpoint-xs: 0;	eg: col-xs-12
breakpoint-sm: 576px;	eg: col-sm-12
breakpoint-md: 768px;	eg: col-md-12
breakpoint-lg: 992px;	eg: col-lg-12
breakpoint-xl: 1200px;	eg: col-xl-12
breakpoint-xxl: 1350px;	eg: col-xxl-12
breakpoint-wl: 1600px;	eg: col-wl-12
All breakpoints:	eg: col-12

This means you can use additional classes such as col-wl-2 for 2 columns at 1600px and up screen widths.