Layout Components

/**
 * Container component for responsive layout
 * @param fluid - Makes container fluid width, or specific breakpoint fluid
 * @param as - Render as different HTML element
 */
function Container(props: ContainerProps): JSX.Element;

interface ContainerProps extends React.HTMLAttributes<HTMLElement> {
  /** Make container fluid width or fluid at specific breakpoint */
  fluid?: boolean | "sm" | "md" | "lg" | "xl" | "xxl";
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

import { Container } from "react-bootstrap";

// Fixed width container
<Container>
  <h1>Fixed Width Content</h1>
</Container>

// Fluid container
<Container fluid>
  <h1>Fluid Width Content</h1>
</Container>

// Fluid at large breakpoint and above
<Container fluid="lg">
  <h1>Fluid from large breakpoint</h1>
</Container>

/**
 * Row component for grid layout
 * @param xs,sm,md,lg,xl,xxl - Number of columns or auto at each breakpoint
 */
function Row(props: RowProps): JSX.Element;

interface RowProps extends React.HTMLAttributes<HTMLElement> {
  /** Columns per row at xs breakpoint */
  xs?: number | "auto";
  /** Columns per row at sm breakpoint */
  sm?: number | "auto";
  /** Columns per row at md breakpoint */
  md?: number | "auto";
  /** Columns per row at lg breakpoint */
  lg?: number | "auto";
  /** Columns per row at xl breakpoint */
  xl?: number | "auto";
  /** Columns per row at xxl breakpoint */
  xxl?: number | "auto";
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

import { Row, Col } from "react-bootstrap";

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

// Row with responsive column counts
<Row xs={1} md={2} lg={4}>
  <Col>Item 1</Col>
  <Col>Item 2</Col>
  <Col>Item 3</Col>
  <Col>Item 4</Col>
</Row>

/**
 * Column component for grid layout
 * @param xs,sm,md,lg,xl,xxl - Column width at each breakpoint
 */
function Col(props: ColProps): JSX.Element;

interface ColProps extends React.HTMLAttributes<HTMLElement> {
  /** Column width at xs breakpoint */
  xs?: number | "auto" | { span?: number | "auto"; offset?: number; order?: number };
  /** Column width at sm breakpoint */
  sm?: number | "auto" | { span?: number | "auto"; offset?: number; order?: number };
  /** Column width at md breakpoint */
  md?: number | "auto" | { span?: number | "auto"; offset?: number; order?: number };
  /** Column width at lg breakpoint */
  lg?: number | "auto" | { span?: number | "auto"; offset?: number; order?: number };
  /** Column width at xl breakpoint */
  xl?: number | "auto" | { span?: number | "auto"; offset?: number; order?: number };
  /** Column width at xxl breakpoint */
  xxl?: number | "auto" | { span?: number | "auto"; offset?: number; order?: number };
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

import { Row, Col } from "react-bootstrap";

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

// Specific column widths
<Row>
  <Col xs={8}>8 columns wide</Col>
  <Col xs={4}>4 columns wide</Col>
</Row>

// Responsive columns with objects
<Row>
  <Col xs={{ span: 12 }} md={{ span: 6, offset: 3 }}>
    Responsive column with offset
  </Col>
</Row>

// Auto-sized columns
<Row>
  <Col xs="auto">Auto width based on content</Col>
  <Col>Fill remaining space</Col>
</Row>

/**
 * Stack component for flexbox layouts
 * @param direction - Flex direction 
 * @param gap - Gap between items
 */
function Stack(props: StackProps): JSX.Element;

interface StackProps extends React.HTMLAttributes<HTMLElement> {
  /** Flex direction */
  direction?: "horizontal" | "vertical";
  /** Gap between items (0-5) */
  gap?: 0 | 1 | 2 | 3 | 4 | 5;
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

import { Stack, Button } from "react-bootstrap";

// Vertical stack (default)
<Stack gap={3}>
  <Button variant="primary">First button</Button>
  <Button variant="secondary">Second button</Button>
  <Button variant="success">Third button</Button>
</Stack>

// Horizontal stack
<Stack direction="horizontal" gap={3}>
  <Button variant="primary">Button 1</Button>
  <Button variant="secondary">Button 2</Button>
  <div className="vr" />
  <Button variant="outline-danger">Button 3</Button>
</Stack>