twbs-react-grid v2.1.1

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>
  )
}

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.

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.