# Grid system Grid, Row, Col, Clearfix

# Basic Grid


          const gridInstance = (
            <Grid>
              <Row className="show-grid">
                <Col xs={12} md={8}><code>&lt;{'Col xs={12} md={8}'} /&gt;</code></Col>
                <Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
              </Row>

              <Row className="show-grid">
                <Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
                <Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
                <Col xsHidden md={4}><code>&lt;{'Col xsHidden md={4}'} /&gt;</code></Col>
              </Row>

              <Row className="show-grid">
                <Col xs={6} xsOffset={6}><code>&lt;{'Col xs={6} xsOffset={6}'} /&gt;</code></Col>
              </Row>

              <Row className="show-grid">
                <Col md={6} mdPush={6}><code>&lt;{'Col md={6} mdPush={6}'} /&gt;</code></Col>
                <Col md={6} mdPull={6}><code>&lt;{'Col md={6} mdPull={6}'} /&gt;</code></Col>
              </Row>
            </Grid>
          );

          
        

# Clearfix

Below, the columns won't clear correctly in viewport sm (768px ≤ width < 992px).


          const gridInstance = (
            <Grid>
              <Row className="show-grid">
                <Col sm={6} md={3}><code>&lt;{'Col sm={6} md={3}'} /&gt;</code><br/><LoremIpsum query="6s" /></Col>
                <Col sm={6} md={3}><code>&lt;{'Col sm={6} md={3}'} /&gt;</code><br/><LoremIpsum query="4s" /></Col>
                <Col sm={6} md={3}><code>&lt;{'Col sm={6} md={3}'} /&gt;</code><br/><LoremIpsum query="6s" /></Col>
                <Col sm={6} md={3}><code>&lt;{'Col sm={6} md={3}'} /&gt;</code><br/><LoremIpsum query="2s" /></Col>
              </Row>
            </Grid>
          );

          
        

Introduce Clearfix, set to visible for the viewports with issue, so that columns clear correctly.


          const gridInstance = (
            <Grid>
              <Row className="show-grid">
                <Col sm={6} md={3}><code>&lt;{'Col sm={6} md={3}'} /&gt;</code><br/><LoremIpsum query="6s" /></Col>
                <Col sm={6} md={3}><code>&lt;{'Col sm={6} md={3}'} /&gt;</code><br/><LoremIpsum query="4s" /></Col>
                <Clearfix visibleSmBlock><code>&lt;{'Clearfix visibleSmBlock'} /&gt;</code></Clearfix>
                <Col sm={6} md={3}><code>&lt;{'Col sm={6} md={3}'} /&gt;</code><br/><LoremIpsum query="6s" /></Col>
                <Col sm={6} md={3}><code>&lt;{'Col sm={6} md={3}'} /&gt;</code><br/><LoremIpsum query="2s" /></Col>
              </Row>
            </Grid>
          );

          
        

# Props

Grid

NameTypeDefaultDescription
componentClasselementType'div'You can use a custom element for this component
fixedbooleanfalse

Turn any fluid-width grid layout into a fixed-width layout by this property.

fluidbooleantrue

Turn any fixed-width grid layout into a full-width layout by this property.

Adds container-fluid class.

gutterbooleanfalseAdds a Gutter around the Grid
collapsebooleanfalseRemove margin around the grid
gutterTopbooleanfalseAdds a gutter at the top of the Grid
gutterLeftbooleanfalseAdds a gutter at the left of the Grid
gutterRightbooleanfalseAdds a gutter at the right of the Grid
gutterBottombooleanfalseAdds a gutter at the bottom of the Grid

Row

NameTypeDefaultDescription
componentClasselementType'div'You can use a custom element for this component

Col

NameTypeDefaultDescription
componentClasselementTypelass:You can use a custom element for this component
lgnumber

The number of columns you wish to span

for Large devices Desktops (≥1200px)

lgHiddenboolean

Hide column

on Large devices Desktops

adds class hidden-lg

lgVisibleboolean

Show column only

on Large devices Desktops

adds class visible-lg

lgOffsetnumber

Move columns to the right

for Large devices Desktops

class-prefix col-lg-offset-

lgPullnumber

Change the order of grid columns to the left

for Large devices Desktops

class-prefix col-lg-pull-

lgPushnumber

Change the order of grid columns to the right

for Large devices Desktops

class-prefix col-lg-push-

mdnumber

The number of columns you wish to span

for Medium devices Desktops (≥992px)

mdHiddenboolean

Hide column

on Medium devices Desktops

adds class hidden-md

mdVisibleboolean

Show column only

on Medium devices Desktops

adds class visible-md

mdOffsetnumber

Move columns to the right

for Medium devices Desktops

class-prefix col-md-offset-

mdPullnumber

Change the order of grid columns to the left

for Medium devices Desktops

class-prefix col-md-pull-

mdPushnumber

Change the order of grid columns to the right

for Medium devices Desktops

class-prefix col-md-push-

smnumber

The number of columns you wish to span

for Small devices Desktops (≥768px)

smHiddenboolean

Hide column

on Small devices Desktops

adds class hidden-sm

smVisibleboolean

Show column only

on Small devices Desktops

adds class visible-sm

smOffsetnumber

Move columns to the right

for Small devices Desktops

class-prefix col-sm-offset-

smPullnumber

Change the order of grid columns to the left

for Small devices Desktops

class-prefix col-sm-pull-

smPushnumber

Change the order of grid columns to the right

for Small devices Desktops

class-prefix col-sm-push-

xsnumber

The number of columns you wish to span

for Extra small devices Desktops (<768px)

xsHiddenboolean

Hide column

on Extra small devices Desktops

adds class hidden-xs

xsVisibleboolean

Show column only

on Extra small devices Desktops

adds class visible-xs

xsOffsetnumber

Move columns to the right

for Extra small devices Desktops

class-prefix col-xs-offset-

xsPullnumber

Change the order of grid columns to the left

for Extra small devices Desktops

class-prefix col-xs-pull-

xsPushnumber

Change the order of grid columns to the right

for Extra small devices Desktops

class-prefix col-xs-push-

hiddenany of: "xs", "sm", "md", "lg" delimited by a ","
visibleany of: "xs", "sm", "md", "lg" delimited by a ","

Clearfix

NameTypeDefaultDescription
componentClasselementType'div'You can use a custom element for this component
visibleLgBlockboolean

Apply clearfix

on Large devices Desktops

adds class visible-lg-block

visibleMdBlockboolean

Apply clearfix

on Medium devices Desktops

adds class visible-md-block

visibleSmBlockboolean

Apply clearfix

on Small devices Desktops

adds class visible-sm-block

visibleXsBlockboolean

Apply clearfix

on Extra small devices Desktops

adds class visible-xs-block