NUI-Widgets documentation has moved to Storybook hosted on Github Pages.

Col

import { Col } from '@concur/nui-widgets';

The Col component is used in conjunction with LayoutGrid, Row and Clearfix components for page layout using the React Bootstrap grid system. It defines a column within a row in the grid. The Bootstrap grid system uses 12 columns per row.

Example

NOTE: The gray background and border colors used in the example are for demonstration purposes only.

<LayoutGrid fluid fullyResponsive>
    <Row className='show-grid'>
        <Col md={8} xs={12}><code>&lt;{'Col xs={12} md={8}'} /&gt;</code></Col>
        <Col md={4} xs={6}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
    </Row>

    <Row className='show-grid'>
        <Col md={4} xs={6}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
        <Col md={4} xs={6}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
        <Col md={4} xsHidden><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>
</LayoutGrid>

Usage

Properties

Property Type Default Description
className String   Custom classes to add to the column’s <div> tag.
lg Number   Number of grid columns to span on large viewports.
lgHidden Boolean false When true, grid column is hidden on large viewports.
lgOffset Number   Number of grid columns to move to the right on large viewports.
lgPull Number   Change the order of grid columns to the left on large viewports.
lgPush Number   Change the order of grid columns to the right on large viewports.
md Number   Number of grid columns to span on medium viewports.
mdHidden Boolean false When true, grid column is hidden on medium viewports.
mdOffset Number   Number of grid columns to move to the right on medium viewports.
mdPull Number   Change the order of grid columns to the left on medium viewports.
mdPush Number   Change the order of grid columns to the right on medium viewports.
sm Number   Number of grid columns to span on small viewports.
smHidden Boolean false When true, grid column is hidden on small viewports.
smOffset Number   Number of grid columns to move to the right on small viewports.
smPull Number   Change the order of grid columns to the left on small viewports.
smPush Number   Change the order of grid columns to the right on small viewports.
xs Number   Number of grid columns to span on extra small viewports.
xsHidden Boolean false When true, grid column is hidden on extra small viewports.
xsOffset Number   Number of grid columns to move to the right on extra small viewports.
xsPull Number   Change the order of grid columns to the left on extra small viewports.
xsPush Number   Change the order of grid columns to the right on extra small viewports.