Layout Components

/**
 * Bootstrap container component for responsive layouts
 * @param props.fluid - Make container full-width (fluid-container) or breakpoint-specific (fluid-sm, fluid-md, etc.)
 * @param props.tag - HTML element to render as (default: 'div')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Child elements to render inside container
 */
function Container(props: {
  fluid?: boolean | string;
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

import { Container } from 'reactstrap';

// Fixed-width container
<Container>
  <p>Fixed-width responsive container</p>
</Container>

// Full-width fluid container
<Container fluid>
  <p>Full-width container</p>
</Container>

// Breakpoint-specific fluid container
<Container fluid="md">
  <p>Fluid on medium screens and up</p>
</Container>

// Custom element
<Container tag="section" className="my-section">
  <p>Container as semantic section element</p>
</Container>

/**
 * Bootstrap grid row component
 * @param props.noGutters - Remove gutters between columns (deprecated in Bootstrap 5)
 * @param props.form - Apply form-specific styling when row contains form elements
 * @param props.tag - HTML element to render as (default: 'div')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Column components and other child elements
 */
function Row(props: {
  noGutters?: boolean;
  form?: boolean;
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

import { Row, Col } from 'reactstrap';

// Basic row with columns
<Row>
  <Col>Column 1</Col>
  <Col>Column 2</Col>
</Row>

// Form row
<Row form>
  <Col md={6}>
    <FormGroup>
      <Label>First Name</Label>
      <Input />
    </FormGroup>
  </Col>
  <Col md={6}>
    <FormGroup>
      <Label>Last Name</Label>
      <Input />
    </FormGroup>
  </Col>
</Row>

// Row without gutters (Bootstrap 4 compatibility)
<Row noGutters>
  <Col>No gutter column 1</Col>
  <Col>No gutter column 2</Col>
</Row>

/**
 * Bootstrap grid column component
 * @param props.xs - Column width for extra small screens (auto, 1-12, or object with size/offset/order)
 * @param props.sm - Column width for small screens and up
 * @param props.md - Column width for medium screens and up  
 * @param props.lg - Column width for large screens and up
 * @param props.xl - Column width for extra large screens and up
 * @param props.xxl - Column width for extra extra large screens and up
 * @param props.tag - HTML element to render as (default: 'div')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Content to render inside column
 */
function Col(props: {
  xs?: string | number | boolean | { size?: number | string; offset?: number; order?: number };
  sm?: string | number | boolean | { size?: number | string; offset?: number; order?: number };
  md?: string | number | boolean | { size?: number | string; offset?: number; order?: number };
  lg?: string | number | boolean | { size?: number | string; offset?: number; order?: number };
  xl?: string | number | boolean | { size?: number | string; offset?: number; order?: number };
  xxl?: string | number | boolean | { size?: number | string; offset?: number; order?: number };
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

import { Container, Row, Col } from 'reactstrap';

// Equal-width columns
<Container>
  <Row>
    <Col>Equal width</Col>
    <Col>Equal width</Col>
    <Col>Equal width</Col>
  </Row>
</Container>

// Specific column sizes
<Row>
  <Col xs="6" md="4">6 cols on xs, 4 cols on md+</Col>
  <Col xs="6" md="8">6 cols on xs, 8 cols on md+</Col>
</Row>

// Auto-sizing columns
<Row>
  <Col md="auto">Auto-sized content</Col>
  <Col>Remaining space</Col>
</Row>

// Advanced column configuration
<Row>
  <Col md={{ size: 6, offset: 3 }}>
    Centered column with offset
  </Col>
</Row>

<Row>
  <Col md={{ size: 4, order: 2 }}>Second in order</Col>
  <Col md={{ size: 4, order: 1 }}>First in order</Col>
  <Col md={{ size: 4, order: 3 }}>Third in order</Col>
</Row>

// Responsive breakpoints
<Row>
  <Col 
    xs={12} 
    sm={6} 
    md={4} 
    lg={3} 
    xl={2}
  >
    Responsive column
  </Col>
</Row>

import { Container, Row, Col } from 'reactstrap';

function GridExample() {
  return (
    <Container>
      <Row>
        <Col xs="12" md="8">
          <h2>Main Content</h2>
          <p>Primary content area</p>
        </Col>
        <Col xs="12" md="4">
          <h3>Sidebar</h3>
          <p>Secondary content</p>
        </Col>
      </Row>
    </Container>
  );
}

function ResponsiveGrid() {
  return (
    <Container>
      <Row>
        <Col md={{ size: 8, offset: 2 }}>
          <h2>Centered Content</h2>
          <p>This content is centered with equal margins</p>
        </Col>
      </Row>
      <Row>
        <Col sm="5" md="6">Left column</Col>
        <Col sm={{ size: 5, offset: 2 }} md={{ size: 6, offset: 0 }}>
          Right column with offset on small screens
        </Col>
      </Row>
    </Container>
  );
}

import { Container, Row, Col, Form, FormGroup, Label, Input, Button } from 'reactstrap';

function FormLayout() {
  return (
    <Container>
      <Form>
        <Row form>
          <Col md={6}>
            <FormGroup>
              <Label>First Name</Label>
              <Input type="text" />
            </FormGroup>
          </Col>
          <Col md={6}>
            <FormGroup>
              <Label>Last Name</Label>
              <Input type="text" />
            </FormGroup>
          </Col>
        </Row>
        <FormGroup>
          <Label>Email</Label>
          <Input type="email" />
        </FormGroup>
        <Button color="primary">Submit</Button>
      </Form>
    </Container>
  );
}