radium-bootstrap-grid

Bootstrap grid system using inline styles

Usage no npm install needed!

<script type="module">
  import radiumBootstrapGrid from 'https://cdn.skypack.dev/radium-bootstrap-grid';
</script>

README

Radium Bootstrap Grid

Grid system based on Twitter Bootstrap but with additional 480px breakpoint.

Install

$ npm install --save radium-bootstrap-grid

Add it to your project

Look at example directory and you need to add only:

import Component from 'react-pure-render/component';
import Radium from 'radium';
import React from 'react';
import { Column, Container, Row } from 'radium-bootstrap-grid';

@Radium
export default class Page extends Component {

  render() {
    return (
      <Container>
        <Row>
          <Column
            ms={4}
            xsHidden
          >
            Make a column
          </Column>
        </Row>
      </Container>
    );
  }

}

Supported features

Multiple stacking option

<Column lg={1} md={3} ms={6} sm={4} xs={12}>Adjust to the device</Column>

Hiding columns

<Column lgHidden mdHidden msHidden smHidden xsHidden>Hidden forever</Column>

Example app

$ npm install
$ cd ./example_app
$ npm install
$ npm start

This will start development server at http://localhost:3001/ and you can check the grid.

License

MIT © Jiri Orsag