Container

Shards React provides support for all native Bootstrap 4 layout elements including containers, rows, columns and form rows so you can use its full power while building your project's responsive layout powered by flexbox.

Basic Example

1 / 12

2 / 12

3 / 12

4 / 12

5 / 12

6 / 12

7 / 12

8 / 12

9 / 12

10 / 12

11 / 12

12 / 12

1 / 6

2 / 6

3 / 6

4 / 6

5 / 6

6 / 6

1 / 3

2 / 3

3 / 3

1 / 2

2 / 2

1 / 1

import React from "react";
import { Container, Row, Col } from "shards-react";

export default class Example extends React.Component {
  render() {
    return (
      <Container className="dr-example-container">
        <Row>
          <Col>1 / 12</Col>
          <Col>2 / 12</Col>
          <Col>3 / 12</Col>
          <Col>4 / 12</Col>
          <Col>5 / 12</Col>
          <Col>6 / 12</Col>
          <Col>7 / 12</Col>
          <Col>8 / 12</Col>
          <Col>9 / 12</Col>
          <Col>10 / 12</Col>
          <Col>11 / 12</Col>
          <Col>12 / 12</Col>
        </Row>

        <Row>
          <Col>1 / 6</Col>
          <Col>2 / 6</Col>
          <Col>3 / 6</Col>
          <Col>4 / 6</Col>
          <Col>5 / 6</Col>
          <Col>6 / 6</Col>
        </Row>

        <Row>
          <Col>1 / 3</Col>
          <Col>2 / 3</Col>
          <Col>3 / 3</Col>
        </Row>

        <Row>
          <Col>1 / 2</Col>
          <Col>2 / 2</Col>
        </Row>

        <Row>
          <Col>1 / 1</Col>
        </Row>
      </Container>
    );
  }
}

Containers

Containers are the most fundamental and required layout element for your application or website's layout. You can use the Container component for a fixed container, and apply the fluid prop for a fluid container.

Rows

The Row component must be placed inside a Container component and it's used to define a row of columns. You can also apply the form prop onto a Row component to turn it into a form-row better suited for building form layouts that help you create a layout with more compact margins.

Columns

The Col component is used to represent a column and must be placed inside a Row component.

sm=12 lg=6

sm=12 md=4 lg=3

sm=12 md=4 lg=6

sm=12 md=4 lg=3

.col-sm-8 .order-sm-2 .offset-sm-2

import React from "react";
import { Container, Row, Col } from "shards-react";

export default class Example extends React.Component {
  render() {
    return (
      <Container className="dr-example-container">
        <Row>
          <Col sm="12" lg="6">
            sm=12 lg=6
          </Col>
          <Col sm="12" lg="6">
            sm=12 lg=6
          </Col>
        </Row>

        <Row>
          <Col sm="12" md="4" lg="3">
            sm=12 md=4 lg=3
          </Col>
          <Col sm="12" md="4" lg="6">
            sm=12 md=4 lg=6
          </Col>
          <Col sm="12" md="4" lg="3">
            sm=12 md=4 lg=3
          </Col>
        </Row>

        <Row>
          <Col sm={{ size: 8, order: 2, offset: 2 }}>
            .col-sm-8 .order-sm-2 .offset-sm-2
          </Col>
        </Row>
      </Container>
    );
  }
}

Props

The following props are available for the Container component.

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
fluid	Whether it is fluid, or not.	`Bool`	-	No
tag	The component's tag type.	`FuncString`	`"div"`	No

Subcomponents

The following subcomponents are available for the Container component.

<Col/>

Prop	Description	Type	Default	Required
xs	Col number or config object for xs viewports.	`Custom`	-	No
sm	Col number or config object for sm viewports.	`Custom`	-	No
md	Col number or config object for md viewports.	`Custom`	-	No
lg	Col number or config object for lg viewports.	`Custom`	-	No
xl	Col number or config object for xl viewports.	`Custom`	-	No
className	The class name.	`String`	-	No
breakpoints	The available breakpoints.	`Array`	`BREAKPOINTS`	No
tag	The component tag type.	`FuncString`	`"div"`	No

<Row/>

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
noGutters	Whether it has gutters, or not.	`Bool`	-	No
form	Whether it is located inside a form, or not.	`Bool`	-	No
tag	The component's tag type.	`FuncString`	`'div'`	No