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
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
verticalAlignment?: "center" | "baseline";
horizontalAlignment?: "start" | "center" | "between" | "end";
noGutters?: boolean;
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-";