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

Row

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

The Row component is used in conjunction with LayoutGrid, Col and Clearfix components for page layout using the React Bootstrap grid system. Each row will contain one or more columns.

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 row’s <div> tag.