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