react-bootstrap-grid-component
v0.2.5
Published
React Bootstrap Grid
Downloads
10
Keywords
Readme
React Bootstrap Grid Component
React Bootstrap Grid is a made to make your life easier while using Bootstrap Grid inside your React project. Main concepts of the grid have been transformed into react components such as Container, Row and Column. By adding attributes that are defined bellow you can easily implement the grid to your liking or given specification.
Installation
Install react-bootstrap-grid-component
npm install react-bootstrap-grid-component
Components
Container
A Container should always wrap Rows as children.
Usage
import 'bootstrap/scss/bootstrap.scss';
import 'react-bootstrap-grid-component/dist/sizingbreakpoints.scss';
import { Container } from "react-bootstrap-grid-component/dist/Container";
import { Column } from "react-bootstrap-grid-component/dist/Column";
import { Row } from "react-bootstrap-grid-component/dist/Row";
<Container>
<Row>
<Column />
</Row>
</Container>
Properties
The only property that this component support is the isFlud which when is defined sets the .container-fuild class on the wrapping tag
/**
* https://getbootstrap.com/docs/4.1/layout/grid/#how-it-works
*/
isFluid?: boolean
Row
Usage
import 'bootstrap/scss/bootstrap.scss';
import 'react-bootstrap-grid-component/dist/sizingbreakpoints.scss';
import { Container } from "react-bootstrap-grid-component/dist/Container";
import { Column } from "react-bootstrap-grid-component/dist/Column";
import { Row } from "react-bootstrap-grid-component/dist/Row";
<Container>
<Row>
<Column />
</Row>
</Container>
Properties
/**
* https://getbootstrap.com/docs/4.0/layout/grid/#vertical-alignment
*/
verticalAlignment?: "center" | "baseline";
/**
* https://getbootstrap.com/docs/4.0/layout/grid/#horizontal-alignment
*/
horizontalAlignment?: "start" | "center" | "between" | "end";
/**
* https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters
*/
noGutters?: boolean;
/**
* Rows must contain only columns to prevent negative margin issues
*/
children: Array<React.ReactElement<Column>> | React.ReactElement<Column>;
Column
import 'bootstrap/scss/bootstrap.scss';
import 'react-bootstrap-grid-component/dist/sizingbreakpoints.scss';
import { Container } from "react-bootstrap-grid-component/dist/Container";
import { Column } from "react-bootstrap-grid-component/dist/Column";
import { Row } from "react-bootstrap-grid-component/dist/Row";
<Container>
<Row>
<Column size="6">
<div>Content</div>
</Column>
<Column size={xs:12,md:6}>
<div>Content</div>
</Column>
</Row>
</Container>
Properties
direction?: "row" | "col";
size?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
verticalAlignment?: "top" | "center" | "bottom" | "justify";
horizontalAlignment?: "left" | "right" | "center" | "stretch";
offset?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
order?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "first" | "last";
Note: If you set size to be equal to 0 the column will disappear
Additional CSS
./src/components/sizingbreakpoints.scss
This SCSS-File extending the Bootstrap default width declaration (h-w-25, h-w-50, h-w-75, h-w-100) with breakpoints.
Prefixes
If you want to override some of the default classes of the bootstrap grid, use prefixes. There are prefixes for container, rows and columns
Depending if you want to apply changes globaly or only in one/couple of components then define the prefix on top of desired page
import prefixes from 'react-bootstrap-grid-component/dist/PrefixManager';
prefixes.container | prefixes.column | prefixes.row = 'h-';
$helper-css-prefix: "h-";