# bootstrap-grid-react

> Bootstrap grid for react - container, column and row

Latest version **2.0.1** (published 2015-08-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install bootstrap-grid-react
pnpm add bootstrap-grid-react
yarn add bootstrap-grid-react
bun add bootstrap-grid-react
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2015-08-17 |
| First published | 2015-08-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Erica |
| Maintainers | ericat |

## Links

- npm: https://www.npmjs.com/package/bootstrap-grid-react
- npm.io page: https://npm.io/package/bootstrap-grid-react

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^0.13.3
- [gulp-rename](https://npm.io/package/gulp-rename.md) ^1.2.2
- [react-tools](https://npm.io/package/react-tools.md) ^0.12.1
- [class-name-builder](https://npm.io/package/class-name-builder.md) 0.1.0

## Recent versions

- 2.0.1 (latest) — 2015-08-17

## README

This is a simple collection of React components that mirror Bootstrap grid system: <Container>, <Row> and <Column>, 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](#user-content-bootstrap-css-file);
- [bundle up your files](#user-content-browserify-bundle) 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:
```javascript
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](https://github.com/Ericat/react-grid-example/blob/master/client/react/app.jsx).

#### 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](https://github.com/Ericat/react-grid-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](https://github.com/Ericat/react-grid-example/blob/master/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](https://raw.githubusercontent.com/Ericat/react-grid-example/master/public/lib/css/bootstrap.min.css).

---
_Source: https://npm.io/package/bootstrap-grid-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._