A set of React components to create a Bootstrap grid, with inline CSS

Usage no npm install needed!

<script type="module">
  import reactGridComponentsUpdated from '';


React Grid Components

A lightweight set of React components used to create a Bootstrap grid


  • Three simple components: Container, Row, Column
  • No dependencies except React
  • Inline CSS


Load the components:

var Container = require('react-grid-components/container');
var Row = require('react-grid-components/row');
var Column = require('react-grid-components/column');


    <Column width={9}>
      Parent Column
        <Column width={6}>Child Column 1</Column>
        <Column width={6}>Child Column 2</Column>
    <Column width={3} offset={3}>Column with an offset 1</Column>
    <Column width={3} offset={3}>Column with an offset 2</Column>
    <Column width={{lg:6, md:6, sm: 9}}>Column with an offset 1</Column>
    <Column width={{lg:6, md:9, sm: 12}}>Column with an offset 2</Column>

For more please see example folder in the git repo

Optional CSS

To have a more consistent Bootstrap experience, you can add this global css rule (to your index.html) However this is optional as the components have this included in the inline styles

  box-sizing: border-box;