Bootstrap Grid System

The Bootstrap 5 grid system allows up to 12 columns across the page.

The system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.

.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-2
.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-2
.col-xl-6
.col-xl-4
.col-xl-2
.col-xl-8
.col-xl-2
.col-xl-4
.col-xl-8
.col-xl-2
.col-xl-10
.col-xl-6
.col-xl-6

Media Queries

Media queries allow a site to be viewed on a variety of screen sizes and browsers. When generating media queries, it’s important to understand the difference between ‘width’ and ‘device-width’. Width describes the rendering surface of the output device (width of document window), whereas the device-width is the actual width of the output device. However, the main difference between the width and device-width is that the device-width doesn’t always match the layout viewport of the device.

In short terms, we are only concerned with the width of the viewport no matter the device.

So, how do we do this?

Breakpoints! Breakpoints are the point in which the site content will respond to provide the user with the best possible layout to consume the information. The best practice is to design for the smallest viewport first. As the view expands, there will come a point in which the design looks terrible. This is where a break-point is added.

Based on the InvestInOntario website, the main breakpoints we are concerned with are desktop, mobile, phone, and tablet. All resolution widths 960 pixels and above are presented with a desktop layout.

This is a sample code for a mobile break-point. We can see that the max-width is identified at 959px. This describes resolutions that are lower than 960 pixels but higher than 459 pixels.

Breakpoint for Mobile

@media (max-width: 959px) { @import 'partials/mobile'; }

This is a sample code for a phone break-point. We can see that the max-width is identified at 500px. This describes resolutions that are lower than 501 pixels wide.

Breakpoint for Phone

@media (max-width: 500px) { @import 'partials/phone'; }

This is a sample code for a tablet break-point. We can see that the max-width is identified at 959px and the min-width is identified at 500px. This describes resolutions with widths between 500 pixels but under 960 pixels.

Breakpoint for Tablet @media (min-width: 500px) and (max-width: 959px) { @import 'partials/tablet'; }

Grid examples

Basic grid layouts to get you familiar with building within the Bootstrap grid system.

In these examples the .themed-grid-col class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default.

Five grid tiers

There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

Three equal columns

Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

.col-md-4
.col-md-4
.col-md-4

Three unequal columns

Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.

.col-md-3
.col-md-6
.col-md-3

Two columns

Get two columns starting at desktops and scaling to large desktops.

.col-md-8
.col-md-4

Full width, single column

No grid classes are necessary for full-width elements.

.col

Two columns with two nested columns

Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

At mobile device sizes, tablets and down, these columns and their nested columns will stack.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Mixed: mobile and desktop

The Bootstrap v4 grid system has five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Mixed: mobile, tablet, and desktop

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

Spacing

The organization of space is key to every layout. Grids, and layouts provide rules that give our designs a consistent rhythm, constrain decision making, and help teams stay aligned.

Designers make spatial decisions every day from the height of a button to the space around an icon. A spatial system is a set of rules for how you measure, size, and space your UI elements. Uniformity on a spatial level allows our components to be more consistent within our regions. This helps our team to communicate better, and reduce the number of decisions will need to be made for each layout. One example of a spatial system is “the 8pt grid.” However, there are many variations and configurations to choose from.

Bootstrap 4 spacing rules

Bootstrap 4 includes utility classes.

Techniques that help us to scan a set of properties

  • One rule per line
  • Indentation
  • Rules maintain a property-sort-order
  • Breakpoints can be nested with pre-/post-processing

Notation

Set the spacing of an element with the {property}{sides}-{breakpoint}-{size} classes. Omit breakpoint if you want the padding or margin to work on all screen sizes.

Property

There are two ways of adding spacing to the elements.

  • m: This property defines the margin. Margin provide with an edge or border.
  • p: This property defines the padding. Padding properties are used to generate space around a content.

Bounds

This allows user to add spacing in content to a specific side wherever required.

  • t : margin-top/padding-top.
  • b : margin-bottom/padding-bottom.
  • l : margin-left/padding-left.
  • r : margin-right/padding-right.
  • x : for padding-left and padding-right/margin-left and margin-right.
  • y : for padding-top and padding-bottom/margin-top and margin-bottom.
  • blank : margin/padding on all sides of the element.
  • Size: This allows user to add a specific amount of spacing to a level.

Sizes

Example: Usage mr-* class.

m - for classes that set margin

r - for classes that set margin-right

.mr-0 No margin 0 – 0px - for classes that eliminate the margin by setting it to 0
.mr-1 No margin 1 – 4px - (by default) for classes that set the margin to $spacer-x * .25 or $spacer-y * .25
.mr-2 No margin 2 – 8px - (by default) for classes that set the margin to $spacer-x * .5 or $spacer-y * .5
.mr-3 No margin 3 - 16px - (by default) for classes that set the margin or padding to $spacer-x or $spacer-y
.mr-4 No margin 4 – 24px - (by default) for classes that set the margin to $spacer-x * 1.5 or $spacer-y * 1.5
.mr-5 No margin 5 – 48px - (by default) for classes that set the margin to $spacer-x * 3 or $spacer-y * 3