Last modified:

A system for organizing and ensuring consistency across layouts.


Example of Grid - default

React documentation

Last modified:

ℹ️ This feature doesn’t have a corresponding React component yet.

Proposed Design

1 main component

  • BcGrid div.bc-grid


  • BcGrid.Container div.container
  • BcGrid.Row div.row
  • BcGrid.Col div.col-${props}


  • all component/sub-components:

    • as - can be passed to specify the HTML element. The default is div.
    • extend html element
  • Container accepts variants as string

    • available variants: [ 'fluid', 'fluid-container']
  • Col allow breakpoints props. sm, md, lg, xl

Component Structure

  <BcGrid.Container as='ul'>
    <BcGrid.Row as='li'>
      <BcGrid.Col sm='12' md='4' lg='3' />
      <BcGrid.Col sm='12' md='4' lg='3' />
      <BcGrid.Col sm='12' md='4' lg='3' />


Last modified:

Use a .bc-grid wrapper class for these otherwise not prefixed BS3 grid classes.

Rows can be placed anywhere provided they’re inside a .bc-grid container.

Grid example.

Grid customizations

  1. Added xl breakpoint ($bc-media-xl)
    • *-xl-*” breakpoint classes
  2. .container-fluid__container: a fixed-width ‘inner’ container for the fluid container.


Last modified:

The grid container is made up of three elements: columns, rows and gutters.


Columns are content is placed in the areas of the screen that contain columns. Column width is defined as a % based on the column count, breakpoint class and the type (pull or offset) by using a helper mixin, rather than fixed values.

Default number of grid columns: 12


A gutter is the space between columns that helps separate content.

Default gutter width: 24px

Customizations & additions

Custom max-width’d container

This (custom) fixed-width container class should be a child of .container-fluid and provides a fixed-width container with max-widths to allow implementers to have a fluid outer container (eg for full-viewport-width blocks with background images, etc.) but return to the fixed-width design of the BS3 .container class.


Last modified:


Last modified:

This is a re-implementation of the 12-column Bootstrap 3 grid system, it means you can use the Bootstrap 3 grid documentation to build grids.

See also

Last modified: