This is a simple collection of React components that mirror Bootstrap grid system: , and , to be used with Node.JS.

The module precompiles JSX to JS, but two extra steps are required for this to work:

• include Bootstrap in your project - you only need the grid;
• bundle up your files with something like Browserify.

Why another grid for React?

I needed a grid system and couldn’t find a good alternative to Bootstrap. Similar modules already exist but couldn’t honestly get them to work.I was also playing around with material-ui and didn’t feel like including the whole react-bootstrap module just for their grid.

In short, use this:

• if you just want a simple grid system;
• if you don’t want to use react-bootstrap for your whole project.

Don’t use this if react-bootstrap is already included in your project, their grid system didn’t use to be included but it is now.

How to use

Simply install it with npm and then require it in your project, for example:

var Grid = require(‘react-grid’);
var Container = Container;
var Row = Grid.Row;
var Col = Grid.Column;

<Container fluid={true}>
  <Row>
    <Col
      lg={6}
      lgOffset={2}
      md={6}
      sm={12}
      xs={12}>
    </Col>
  </Row>
</Container>

You can pass custom classes to both Row and Column. Full example here.

Browserify bundle

Your file(s) will need to go through something like Browserify to allow the use of “require” on the front-end: you can see this example that handles the build with a Gulp task. Chances are that you will already have one in place if you use React with Node.JS, but feel free to check out the example above.

Bootstrap CSS file

In the example above you will find a config.json that you can upload to Bootstrap at http://getbootstrap.com/customize/ to get a custom version that only includes the grid system. You can also copy it from here.