Bootstrap: Grid

Basic Syntax:

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. Rubix leverages the power of React to write composable, semantic components. By default the Grid is fluid but you'll soon see that you can pass different options to control the look and feel of your Grid. The basic syntax of a Grid in JSX is:

<Grid>
</Grid>

Fixed:

If you need a fixed width Grid it would be:

<Grid fixed>
</Grid>

Zero padding:

If you need a Grid with zero padding (even the rows and columns inside it will inherit that padding) it would be:

<Grid collapse>
</Grid>

Gutter:

If you need to add a gutter to your Grid it would be:

<Grid gutter>
</Grid>

Gutter top/left/right/bottom:

You can also control where you want your gutter by including directionality constraints to your Grid:

<Grid gutterTop gutterLeft gutterRight gutterBottom>
</Grid>

You can of course nest grids (we'll be covering Cols and Rows soon! Don't worry :) ):

<Grid>
  <Row>
    <Col xs={12}>
      <Grid fixed gutter>
        <Row>
          <Col xs={6} sm={3} md={4} lg={2}></Col>
        </Row>
      </Grid>
    </Col>
  </Row>
</Grid>

You can of course mix the above options depending on your layout. We also fix a special z-index bug in iOS and Safari by including a z-index for every Grid you create so that dropdowns are not affected by it.


Bootstrap: Rows

Basic Syntax:

Rows in a Grid are used to create horizontal groups of Columns. To create a Row the syntax is:

<Row>
</Row>

Bootstrap: Columns

Basic Syntax:

Columns in a Grid are containers that house your content. These columns create gutters via padding. The basic syntax to create a column is:

<Col xs={12} sm={12} md={12} lg={12}>
</Col>

xs, sm, md and lg options are defined breakpoints which alters the layout depending on the type of device you are viewing the site on.


Clearfix:

Clear the columns if their content doesn't match in height:

<Col clearfix>
</Col>

Hidden/Visible:

Pass a delimited list of options to hidden and visible properties:

<Col xs={6} md={3} lg={4} sm={12} hidden='xs, md, lg, print' visible='sm'>
</Col>

Offsets:

Move columns to the right using offsets. Example:

<Grid>
  <Row>
    <Col md={4}>
      Col(md:4)
    </Col>
    <Col md={4} mdOffset={4}>
      Col(md:4,mdOffset:4)
    </Col>
  </Row>
</Grid>

Push/Pull:

Easily change the order of the built-in grid columns with Push and Pull properties. Example:

<Grid>
  <Row>
    <Col md={9} mdPush={3}>
      Col(md:9, mdPush:3)
    </Col>
    <Col md={3} mdPull={9}>
      Col(md:3, mdPull:9)
    </Col>
  </Row>
</Grid>

Collapse:

Collapse paddings on your Columns. Example:

<Grid>
  <Row>
    <Col xs={6} collapseRight>
    </Col>
    <Col xs={6} collapseLeft>
    </Col>
  </Row>
</Grid>

Bootstrap: Grid Example

Here is an example of a bootstrap grid:

Col(lg:6)
Col(lg:6)
Col(lg:4)
Col(lg:4)
Col(lg:4)
Col(lg:3)
Col(lg:3)
Col(lg:6)
Col(lg:2)
Col(lg:4)
Col(lg:6)

The code for the above grid:

<Grid>
  <Row>
    <Col sm={6} md={6} lg={6} xsOnlyGutterBottom smCollapseRight>
      <Well noMargin>Col(lg:6)</Well>
    </Col>
    <Col sm={6} md={6} lg={6}>
      <Well noMargin>Col(lg:6)</Well>
    </Col>
  </Row>
</Grid>
<Grid gutterTop>
  <Row>
    <Col sm={4} md={4} lg={4} xsOnlyGutterBottom smCollapseRight>
      <Well noMargin>Col(lg:4)</Well>
    </Col>
    <Col sm={4} md={4} lg={4} xsOnlyGutterBottom smCollapseRight>
      <Well noMargin>Col(lg:4)</Well>
    </Col>
    <Col sm={4} md={4} lg={4}>
      <Well noMargin>Col(lg:4)</Well>
    </Col>
  </Row>
</Grid>
<Grid gutterTop>
  <Row>
    <Col sm={3} md={3} lg={3} xsOnlyGutterBottom smCollapseRight>
      <Well noMargin>Col(lg:3)</Well>
    </Col>
    <Col sm={3} md={3} lg={3} xsOnlyGutterBottom smCollapseRight>
      <Well noMargin>Col(lg:3)</Well>
    </Col>
    <Col sm={6} md={6} lg={6}>
      <Well noMargin>Col(lg:6)</Well>
    </Col>
  </Row>
</Grid>
<Grid gutterTop gutterBottom>
  <Row>
    <Col md={2} lg={2} xsOnlyGutterBottom smOnlyGutterBottom mdCollapseRight>
      <Well noMargin>Col(lg:2)</Well>
    </Col>
    <Col md={4} lg={4} xsOnlyGutterBottom smOnlyGutterBottom mdCollapseRight>
      <Well noMargin>Col(lg:4)</Well>
    </Col>
    <Col md={6} lg={6}>
      <Well noMargin>Col(lg:6)</Well>
    </Col>
  </Row>
</Grid>