Skip to content

Latest commit

 

History

History
224 lines (174 loc) · 5.8 KB

README.md

File metadata and controls

224 lines (174 loc) · 5.8 KB
Raw

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.
  • Sign up 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">
                    Sign Up
                </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>