Grid

Columns

Bootstrap uses a mobile first grid system that spans over 12 columns as the device and viewport size increase, making it fluidly responsive (please download the Bootstrap 4 library). However, when the page has a left menu (3 columns wide), the other 9 columns are redistributed in 12.

Margins

Gutter

Each gutter on the grid measures 30 pixels in width, or 15 pixels on the side of each column, whether the grid covers the 12 standard columns, or whether the 12 columns are deconstructed into part of the basic grid.

Breakpoints

These breakpoints describe column and width specifications for different screens, devices and orientations.

For some measurements, the values remain the same even if a device is rotated. For that reason, the smallest width in either orientation is the defining value.

Breakpoints Value (px/rem) Columns Size Gutter
Extra small
<576px
320 / 20 12   30px (15px on each side of a column)
Small
≥576px
320 / 20 12   30px (15px on each side of a column)
Medium
≥768px
320 / 20 12   30px (15px on each side of a column)
Large
≥992px
320 / 20 12   30px (15px on each side of a column)
Extra large
≥1200px
320 / 20 12   30px (15px on each side of a column)

A UI may reflow into available space. Elements from a single-column format may reflow to fill the content area in various combinations.

Grid behaviors

Fluid columns

Fixed columns

8pt grid and visual rhythm

The 8px grid

Best practices

Do

Do not

Column layout and text

Best practices

  • Page layouts are created using bootstrap through rows and columns.
  • Rows are to be placed in a .container (fixed-width) or .container-fluid (full-width) to ensure proper alignments and paddings
  • Rows are used to create horizontal groups of columns
  • Content is to be placed in columns
  • Columns are direct children of the rows
  • Pre-defined classes such as .row and .col-12 are used to make quick grid layouts
  • Grid columns are created by specifying the number of 12 available columns to utilize for a given layout
  • Grid classes such as .col-lg-4 will target and affect medium devices but also larger than md devices in the same way
  • Pre-defined bootstrap and custom classes are to be used to ensure a conformity in the code. The CSS stylesheet currently in use will be conveyed in due time
Your privacy

BDC uses cookies to improve your experience on its website and for advertising purposes, to offer you products or services that are relevant to you. By clicking ῝I understand῎ or by continuing to browse this site, you consent to their use.

To find out more, consult our Policy on confidentiality.