# react-bs4grid

> React Boostrap 4 Grid Component

Latest version **1.0.1** (published 2018-12-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-bs4grid
pnpm add react-bs4grid
yarn add react-bs4grid
bun add react-bs4grid
```

## 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 | 1.0.1 |
| Published | 2018-12-11 |
| First published | 2018-01-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Mick Rippon |
| Maintainers | mickrip |
| Keywords | react, bootstrap, grid |

## Links

- npm: https://www.npmjs.com/package/react-bs4grid
- Repository: https://github.com/mickrip/react-bs4grid
- Homepage: https://github.com/mickrip/react-bs4grid#readme
- Issues: https://github.com/mickrip/react-bs4grid/issues
- npm.io page: https://npm.io/package/react-bs4grid

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^16.2.0
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [react-style-proptype](https://npm.io/package/react-style-proptype.md) ^3.1.0

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2018-12-11
- 1.0.0 — 2018-08-14
- 0.1.2 — 2018-04-04
- 0.1.1 — 2018-04-04
- 0.1.0 — 2018-01-24
- 0.0.16 — 2018-01-24
- 0.0.15 — 2018-01-08
- 0.0.14 — 2018-01-07
- 0.0.13 — 2018-01-07
- 0.0.12 — 2018-01-07

## README

# react-bs4grid

A Bootstrap 4 implementation for React.

[https://getbootstrap.com/docs/4.0/layout/grid/](https://getbootstrap.com/docs/4.0/layout/grid/)


## Installation

`npm install react-bs4grid`

or

`yarn add react-bs4grid`

**Importing**

```js
import { Container, Row, Col } from "react-bs4grid";
```

## Examples

### Simple 12 column across

```js
 <Container>
    <Row>
        <Col>
            One Column
        </Col>
    </Row>
</Container>
```

### Columns without props are spanned equally.
```js
<Container>
    <Row>
        <Col>One</Col>
        <Col>Two</Col>
    </Row>
</Container>
```
*Note:* By default, on mobile resolutions, columns become stacked. You can override this behaviour by adding the `responsive={false}` prop to `<Row>`. ie  `<Row responsive={false}>`.

### Non equal columns

```js
<Container>
    <Row>
        <Col w={6} md={{ size: 4 }}>
            .col-6 .col-md-4
        </Col>
        <Col w={6} md={{ size: 8 }}>
            .col-6 .col-md-8
        </Col>
    </Row>
</Container>
```

Bootstrap 4 grid is '*mobile-first*'. So, responsive classes like `*xs` are replaced with the `col-{width}` class. In my experience, you're mostly stacking your columns on mobile anyway, so apply the `w` prop only when you want adjacent columns in your mobile view. (note: The `w` prop is an alias for `width`, they're interchangable.) `w="auto"` will work as well.

Responsive widths are `sm`, `md`, `lg`, `xl`. See the BS4 grid docs for more info.

### Fluid layout

Use the `fluid` prop on your `<Container>`.

```js
<Container fluid>
    <Row>
        <Col md={{ size: 4 }}>Larry!</Col>
        <Col md={{ size: 4 }}>Curly!</Col>
        <Col md={{ size: 4 }}>Moe!</Col>
    </Row>
</Container>
```


### Removing the guttering

Use the `noGutters` prop on `<Row>` to remove the padding from each Col.

```js
<Container debug>
    <Row noGutters>
        <Col md={{ size: 4 }}>Larry</Col>
        <Col md={{ size: 4 }}>Curly</Col>
        <Col md={{ size: 4 }}>Moe</Col>
    </Row>
</Container>
```

### Horizonally aligning cols

Use the `justifyContent` prop in `<Row>`. Supported values are `start|end|center|between|around`.

```js
<Container>
    <Row justifyContent="center">
        <Col sm={{ size: 5 }}>
            5 columns wide and centered.
        </Col>
    </Row>
</Container>
```


### Vertically aligning Rows and Col Content.

Use the `alignItems` prop in `<Row>`. Row needs to be styled with a height before it will take effect.

```js
<Container>
    <Row alignItems="center" justifyContent="center" style={{height: "100vh"}}>
        <Col sm={{ size: 5 }}>Hello World</Col>
    </Row>
</Container>
 ```

Same concept will work for `<Col>`. (as well as `alignSelf`)

```js
<Container>
    <Row>
        <Col style={{height: 200}}>
        	Hello
        </Col>
        <Col alignItems="center">
            center of Col
        </Col>
        <Col alignItems="end">
            bottom of Col
        </Col>
    </Row>
</Container>
```

### Debugging

Adding the `debug` prop within container will add borders to Cols.


## Props

### `<Container>`

| prop | type | description
|------|------|------------|
| fluid |bool|  turns off the container width restriction. 100% of the width of the container. Default `false` |
| noGutters |bool | Turns off all guttering for all Rows. Default `false` |
| debug |bool | Will draw borders around your Cols, to help you figure out what's going on. |
| styles	|obj | applies react css styles |
| className |string | appends custom classes |

### `<Row>`

| prop | type |  description
|------|------|------------|
| noGutters |bool|  Turns off guttering (default false) |
| justifyContent | string | Determines how child `<Col>`s are positioned horizontally. Options are `start`, `center`, `end`, `around`, `between` |
| alignItems |string| Determines how child `<Col>`s are positioned vertically. Options are `start`, `center`, `end`  |
| responsive |bool | Disable default responsive behaviour |
| styles	|obj | applies react css styles |
| className |string| appends custom classes |

### `<Col>`

| prop | type | description
|------|------|------------|
| noGutter |bool|  Turns off guttering for that Col. Default `false`. |
| alignItems |string|  Determines how content is vertically aligned. Options are `start`, `center`, `end`  |
| push       |string| Align col. Effective when width="auto" |
| w (or width)| any  | Generic width. Options are 1-12 or `auto` |
| sm / md / lg / xl | any | Width based on breakpoint. Provide an object with valid keys `size`, `order`, `offset`  |
| size | string / number | Property of width-based breakpoint. Sets width at specified breakpoint. Options are 1-12 |
| order | string / number | Property of width-based breakpoint. Sets order at specified breakpoint. Options are 1-12 |
| styles	|obj | applies react css styles |
| className |string | appends custom classes |

## Some use-cases

### Navigation Bar (non-responsive)

* The logo container is only as wide as the logo.
* Nav section stretches as much as it needs to.
* Sign up section pushed to the far right.

```js
<Container fluid style={{background:"#eee"}}>
    <Row>
        <Col>
            <Row alignItems="center" responsive={false}>
                <Col w="auto">
                    <h1>Logo</h1>
                </Col>
                <Col w="auto">
                    Page 1 : Page 2 : Page 3 : Page 4
                </Col>
                <Col w="auto" push="left">
                    Sign Up
                </Col>
            </Row>
        </Col>
    </Row>
</Container>
```

### Content horizontally and vertically centred

* Row requires an explicit height for vertical alignment.

```js
<Container>
    <Row alignItems="center" justifyContent="center" style={{height: "100vh"}} >
        <Col w={5}>
            <div>
                In the middle
            </div>
        </Col>
    </Row>
</Container>
```

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