Bootstrap React Grid

A full implementation of the standalone Bootstrap Flexbox Grid for React using Styled Components.

import { Container, Row, Col } from 'twbs-react-grid';

function Page() {
  return (
    <Container>
      <Row>
        <Col size={3} lg={4}>
          <SideNav />
        </Col>

        <Col size={9} lg={8}>
          <PageBody />
        </Col>
      </Row>
    </Container>
  )
}

Getting Started

This package offers all of the main grid layout elements supplied by Bootstrap (container, row and column) along with a higher ordered theme component for overriding the Bootstrap layout defaults.

Table of Contents

• Installation
• Grid Theme
• Container
• Row
• Column
• Element Properties
• Style Override
• Demo

Installation

To get started, install the twbs-react-grid and styled-components packages on your React project using your preferred package manager.

npm install --save styled-components twbs-react-grid

Grid Theme

The GridTheme component allows you to override the default Bootstrap layout sizing options (such as breakpoint widths / container sizes). It also (optionally) applies the global page styling.

The grid theme uses the React Context API, and must wrap your application at the top level.

import { GridTheme } from 'twbs-react-grid';

function App() {
  return (
    <GridTheme spacing={12} xlWidth={1260}>
      ...
    </GridTheme>
  )
}

| Property | Details | Default Value | | :------- |:--------| :-------------| |themeStyle|When true, the default Bootstrap html styling will be applied to the webpage.|true |spacing|The value in pixels to use for the layout margin and padding. Also referred to as gutters by Bootstrap.|15 |smmdlgxl|The minimum widths for each breakpoint. For example, by default, the sm breakpoint will activate when the screen hits 576px. You can supply any numeric value to override these defaults.|See Grid Options |smWidthmdWidthlgWidthxlWidth|The maximum widths for each breakpoint container. For example, the md breakpoint will have a container with a maximum width of 720px by default. You can supply any numeric value to override these defaults.|See Grid Options

Container

Reference: Bootstrap 4.4 - Containers

The Container component accepts the size property - which can be either fluid, sm, md, lg or xl. This property controls the fluidity of the container. See the reference above for more information. Containers conform to the layout spacing and sizing supplied through the Grid Theme.

import { Container } from 'twbs-react-grid';

function Page() {
  return (
    <Container size="md">
      ...
    </Container>
  )
}

Row

Reference: Bootstrap 4.4 - Row Columns

The Row component wraps columns, and can optionally control the sizing of it's column children by declaring how many columns to render per row on each breakpoint through the cols_* prop. See the reference above for more information on how this works.

Taking it a step further, row's can also automatically apply Element Properties to it's column children on each breakpoint through the col_props_* property (this is useful, for example, to set a bottom margin on each child column).

import { Row } from 'twbs-react-grid';

function Elem() {
  return (
    <Row cols={2} cols_lg={4} col_props={{ mB: 20 }}>
      ...
    </Row>
  )
}

Column

Reference: Bootstrap 4.4 - Grid Options

The Col element is the meat of the grid layout. A column can declare it's size on each breakpoint (1 through 12, equal or auto). Columns will assume an equal size by default. For more information on how column sizing works, see the reference above. The size property is the extra small / default size of the column.

The breakpoint values for column elements can also be an object describing the Element Properties at the given breakpoint and/or the actual breakpoint size.

import { Col } from 'twbs-react-grid';

function Elem() {
  return (
    <Col size={12} md={6} xl={{ size: 4, p: 16 }}>
      ...
    </Col>
  )
}

Element Properties

Reference: Bootstrap 4.4 - Layout Utilities

Each of the Container, Row and Col elements can be assigned layout properties to easily control their display, alignment and spacing.

For more fine grained control, Column elements can also set their properties on each breakpoint. For example, a column can be hidden by default, and be displayed on the medium breakpoint and up. As described above in the Row section, column properties can also be applied at the row level for ease of application.

| Property | Details | Values | | :------- |:--------| :-------------| |display|Controls the element's CSS display property.|none, inline, block, inline-block, table, table-row, table-cell, flex, inline-flex |direction|Controls the element's CSS flex-direction property.|row, row-reverse, column, column-reverse |justifyContent|Controls the element's CSS justify-content property.|start, end, center, between, around, evenly |alignContent|Controls the element's CSS align-content property.|start, end, center, between, around, stretch |alignItems|Controls the element's CSS align-items property.|start, end, center, baseline, stretch |alignSelf|Controls the element's CSS align-self property.|start, end, center, auto, baseline, stretch |wrap|Controls the element's CSS flex-wrap property.|true, false, reverse |growshrink|Controls the element's CSS grow and shrink properties.|0, 1 |fill|When true, sets the element's CSS flex property to 1 1 auto.|true, false |order|Controls the element's CSS order property. This property is ideally used to dynamically re-order columns. See Reordering for more info.|first, last, 0-12 |offset|This property is used to dynamically offset columns. See Offsetting Columns for more info.|1-11 |m and pmX and pXmY and pYmT and pTmB and pBmL and pLmR and pR|Spacing properties are used to control the element's margin and padding. Spacing values can either be numeric (in pixels) or string values (such as auto or 2em).|-

Style Override

You can override the style of any of the Container, Row and Col elements in the same way you'd override the style of any other styled component. Styles can be overriden through a parent styled-component or wrapped directly.

import styled from 'styled-components';
import { Row } from 'twbs-react-grid';

const Parent = styled.div`
  ${Row} {
    margin-bottom: 24px;
  }
`

const CustomRow = styled(Row)`
  margin-bottom: 24px;
`

Demo

This repo is configured to run a local demo through a basic webpack-dev-server configuration on port 7200. To run the demo locally, simply run the following commands:

git clone https://github.com/Rjpdude/twbs-react-grid.git
cd twbs-react-grid
npm install
npm run demo

The demo application is configured to run through the scripts/demo/demo.tsx file.