styled-grid-system-component
The bootstrap grid system component made with styled-components
This is a modular approach to use bootstrap components for quick prototypes, as an entrypoint of your own component library, or if you need just one bootstrap component for your application.
Installation
Note: this component has a peer dependency on
styled-components
> v4. To use this component you also need tonpm i styled-components -S
.
npm install --save styled-grid-system-componentnpm install --save styled-components@^4.1.3 react@^16.7.0 # Peer dependencies
Usage
For detailed information take a look at the documentation.
import Column Row from 'styled-grid-system-component'; const MyGridComponent = props <div> <Row> <Column => 'xs={6}' </Column> <Column => 'xs={6}' </Column> </Row> <Row> <Column> 'no props' </Column> <Column> 'no props' </Column> <Column> 'no props' </Column> </Row> <Row> <Column => 'xs={3}' </Column> <Column => 'xs={3}' </Column> <Column => 'xs={6}' </Column> </Row> </div>;
Properties
Properties which can be added to the component to change the visual appearance. Every row consists of maximum of 12 columns.
xs
Type: only on Column, number (between 1 and 12)sm
Type: only on Column, number (between 1 and 12)md
Type: only on Column, number (between 1 and 12)lg
Type: only on Column, number (between 1 and 12)xl
Type: only on Column, number (between 1 and 12)xsOffset
Type: only on Column, number (between 1 and 12)smOffset
Type: only on Column, number (between 1 and 12)mdOffset
Type: only on Column, number (between 1 and 12)lgOffset
Type: only on Column, number (between 1 and 12)xlOffset
Type: only on Column, number (between 1 and 12)
License
MIT © Lukas Aichbauer