Layout

Options for structuring your pages with Bootstrap, including global styles, required scaffolding, grid system, and more.

#Grid system Grid, Row, Col, Clearfix

#Basic Grid

<Col xs={12} md={8} />;
<Col xs={6} md={4} />
<Col xs={6} md={4} />
<Col xs={6} md={4} />
<Col xs={6} xsOffset={6} />
<Col md={6} mdPush={6} />
<Col md={6} mdPull={6} />
<Grid>
  <Row className="show-grid">
    <Col xs={12} md={8}>
      <code>{'<Col xs={12} md={8} />'};</code>
    </Col>
    <Col xs={6} md={4}>
      <code>{'<Col xs={6} md={4} />'}</code>
    </Col>
  </Row>

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

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

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

#Clearfix

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

< Col sm={6} md={3} />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere.
< Col sm={6} md={3} />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus.
< Col sm={6} md={3} />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere.
< Col sm={6} md={3} />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus.
const dummySentences = [
  'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
  'Donec hendrerit tempor tellus.',
  'Donec pretium posuere tellus.',
  'Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus.',
  'Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
  'Nulla posuere.',
  'Donec vitae dolor.',
  'Nullam tristique diam non turpis.',
  'Cras placerat accumsan nulla.',
  'Nullam rutrum.',
  'Nam vestibulum accumsan nisl.'
];

const gridInstance = (
  <Grid>
    <Row className="show-grid">
      <Col sm={6} md={3}>
        <code>
          &lt;
          {'Col sm={6} md={3}'} /&gt;
        </code>
        <br />
        {dummySentences.slice(0, 6).join(' ')}
      </Col>
      <Col sm={6} md={3}>
        <code>
          &lt;
          {'Col sm={6} md={3}'} /&gt;
        </code>
        <br />
        {dummySentences.slice(0, 4).join(' ')}
      </Col>
      <Col sm={6} md={3}>
        <code>
          &lt;
          {'Col sm={6} md={3}'} /&gt;
        </code>
        <br />
        {dummySentences.slice(0, 6).join(' ')}
      </Col>
      <Col sm={6} md={3}>
        <code>
          &lt;
          {'Col sm={6} md={3}'} /&gt;
        </code>
        <br />
        {dummySentences.slice(0, 2).join(' ')}
      </Col>
    </Row>
  </Grid>
);

render(gridInstance);

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

< Col sm={6} md={3} />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere.
< Col sm={6} md={3} />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus.
< Clearfix visibleSmBlock />
< Col sm={6} md={3} />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere.
< Col sm={6} md={3} />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus.
const dummySentences = [
  'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
  'Donec hendrerit tempor tellus.',
  'Donec pretium posuere tellus.',
  'Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus.',
  'Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
  'Nulla posuere.',
  'Donec vitae dolor.',
  'Nullam tristique diam non turpis.',
  'Cras placerat accumsan nulla.',
  'Nullam rutrum.',
  'Nam vestibulum accumsan nisl.'
];

const gridInstance = (
  <Grid>
    <Row className="show-grid">
      <Col sm={6} md={3}>
        <code>
          &lt;
          {'Col sm={6} md={3}'} /&gt;
        </code>
        <br />
        {dummySentences.slice(0, 6).join(' ')}
      </Col>
      <Col sm={6} md={3}>
        <code>
          &lt;
          {'Col sm={6} md={3}'} /&gt;
        </code>
        <br />
        {dummySentences.slice(0, 4).join(' ')}
      </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 />
        {dummySentences.slice(0, 6).join(' ')}
      </Col>
      <Col sm={6} md={3}>
        <code>
          &lt;
          {'Col sm={6} md={3}'} /&gt;
        </code>
        <br />
        {dummySentences.slice(0, 2).join(' ')}
      </Col>
    </Row>
  </Grid>
);

render(gridInstance);

#Props

#Grid

NameTypeDefaultDescription
fluid
boolean
false

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

Adds container-fluid class.

componentClass
elementType
'div'

You can use a custom element for this component

bsClass
string
'container'

Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.

#Row

NameTypeDefaultDescription
componentClass
elementType
'div'

You can use a custom element type for this component.

bsClass
string
'row'

Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.

#Col

NameTypeDefaultDescription
componentClass
elementType
'div'

You can use a custom element type for this component.

xs
number

The number of columns you wish to span

for Extra small devices Phones (<768px)

class-prefix col-xs-

sm
number

The number of columns you wish to span

for Small devices Tablets (≥768px)

class-prefix col-sm-

md
number

The number of columns you wish to span

for Medium devices Desktops (≥992px)

class-prefix col-md-

lg
number

The number of columns you wish to span

for Large devices Desktops (≥1200px)

class-prefix col-lg-

xsHidden
boolean

Hide column

on Extra small devices Phones

adds class hidden-xs

smHidden
boolean

Hide column

on Small devices Tablets

adds class hidden-sm

mdHidden
boolean

Hide column

on Medium devices Desktops

adds class hidden-md

lgHidden
boolean

Hide column

on Large devices Desktops

adds class hidden-lg

xsOffset
number

Move columns to the right

for Extra small devices Phones

class-prefix col-xs-offset-

smOffset
number

Move columns to the right

for Small devices Tablets

class-prefix col-sm-offset-

mdOffset
number

Move columns to the right

for Medium devices Desktops

class-prefix col-md-offset-

lgOffset
number

Move columns to the right

for Large devices Desktops

class-prefix col-lg-offset-

xsPush
number

Change the order of grid columns to the right

for Extra small devices Phones

class-prefix col-xs-push-

smPush
number

Change the order of grid columns to the right

for Small devices Tablets

class-prefix col-sm-push-

mdPush
number

Change the order of grid columns to the right

for Medium devices Desktops

class-prefix col-md-push-

lgPush
number

Change the order of grid columns to the right

for Large devices Desktops

class-prefix col-lg-push-

xsPull
number

Change the order of grid columns to the left

for Extra small devices Phones

class-prefix col-xs-pull-

smPull
number

Change the order of grid columns to the left

for Small devices Tablets

class-prefix col-sm-pull-

mdPull
number

Change the order of grid columns to the left

for Medium devices Desktops

class-prefix col-md-pull-

lgPull
number

Change the order of grid columns to the left

for Large devices Desktops

class-prefix col-lg-pull-

bsClass
string
'col'

Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.

#Clearfix

NameTypeDefaultDescription
componentClass
elementType
'div'

You can use a custom element type for this component.

visibleXsBlock
boolean

Apply clearfix

on Extra small devices Phones

adds class visible-xs-block

visibleSmBlock
boolean

Apply clearfix

on Small devices Tablets

adds class visible-sm-block

visibleMdBlock
boolean

Apply clearfix

on Medium devices Desktops

adds class visible-md-block

visibleLgBlock
boolean

Apply clearfix

on Large devices Desktops

adds class visible-lg-block

bsClass
string
'clearfix'

Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.