react-bs4grid

A Bootstrap 4 implementation for React.

https://getbootstrap.com/docs/4.0/layout/grid/

Installation

npm install react-bs4grid

or

yarn add react-bs4grid

Importing

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

Examples

Simple 12 column across

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

Columns without props are spanned equally.

<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

<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>.

<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.

<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.

<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.

<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)

<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.
• # section pushed to the far right.

<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">
                    #
                </Col>
            </Row>
        </Col>
    </Row>
</Container>

Content horizontally and vertically centred

• Row requires an explicit height for vertical alignment.

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