Skip to main content

Layout

Grid

We use Bootstrap's grid for responsive top-level layouts. Our typical dashboard uses a three-column layout that collapses to two-columns on tablet sizes, and a single column on mobile sizes.

Padding & Margins

Use Bootstrap's spacing utilities for consistent margins and paddings. NOTE: Unlike Bootstrap's system, we use the number of pixels of padding or margin. Our size classes:

  • 4: 4px
  • 8: 8px
  • 16: 16px
  • 20: 20px
  • 24: 24px
  • 32: 32px
  • 48: 48px

Some examples of margin and padding helper classes:

  • .m-8: A margin of 8 on all sides.
  • .px-16 .py-24: A padding of 16px on left and right, and 24px on top and bottom.
  • .ml-8 mr-16: A margin of 8px on the left side, and 16px on the right.

Spacing utilities also include responsive variants to change the margin and padding at different sizes:

  • .m-8 .m-md-16 .m-lg-24: Margin of 8px at mobile sizes, expanding to 16px on tablets, and 24px at desktop sixes.
  • .pt-8 .pt-md-0 .pb-md-16: Padding of 8px on top at mobile sizes. At tablet or larger sizes, no top padding but a bottom padding of 16px.
Margins
.m-4
.m-8
.m-16
.m-24
.m-32
Padding
.p-4
.p-8
.p-16
.p-24
.p-32
Flex

Use Bootstrap's flex utilities for flex-based layouts. As a quick summary of useful classes

  • .d-flex makes the element use flexbox display
  • .flex-column and .flex-row set the flex direction
  • .justify-content-between, .justify-content-start, and .justify-content-end are some options to justify the content in the flex container.
  • .align-items-center, .align-items-start, and .align-items-end are some options to align items in the flex container.

All of the flex utilities include responsive variants, allowing the layout to change based on the size of the browser window. For examples, check out Patterns or the Gigs example.

Justify content

Justify content between

Justify content center

Justify content start

Justify content end

Align items

Align items center

Align items start

Align items end

Gutters

Our design system supports full-bleed layouts that ignore the grid system gutters. This is useful at narrow window widths like on mobile browsers, to make better use of the available space.

  • To remove the left & right gutters on a component, add the .gutter-none class.
  • To remove the left & right gutters on a component at certain breakpoints, add a responsive variant: .gutter-xs-none, .gutter-sm-none, .gutter-md-none, etc.
  • To add gutters at certain breakpoints, add .gutter-sm-normal, .gutter-md-normal, etc.
A good combo is .gutter-xs-none .gutter-sm-normal. This will full-bleed the component at mobile sizes, and use the regular grid system at all other sizes.

Gutters
No gutter
Gutter
Responsive gutters
This card will have no gutters when you resize the page to mobile width.