0
# Layout Components
1

2
Foundation layout components for responsive grid systems and content organization using Bootstrap's responsive grid system.
3

4
## Capabilities
5

6
### Container
7

8
A responsive fixed-width container that centers your content horizontally.
9

10
```typescript { .api }
11
/**
12
 * Container component for responsive layout
13
 * @param fluid - Makes container fluid width, or specific breakpoint fluid
14
 * @param as - Render as different HTML element
15
 */
16
function Container(props: ContainerProps): JSX.Element;
17

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

28
**Usage Examples:**
29

30
```typescript
31
import { Container } from "react-bootstrap";
32

33
// Fixed width container
34
<Container>
35
  <h1>Fixed Width Content</h1>
36
</Container>
37

38
// Fluid container
39
<Container fluid>
40
  <h1>Fluid Width Content</h1>
41
</Container>
42

43
// Fluid at large breakpoint and above
44
<Container fluid="lg">
45
  <h1>Fluid from large breakpoint</h1>
46
</Container>
47
```
48

49
### Row
50

51
Container for a row of columns in the grid system.
52

53
```typescript { .api }
54
/**
55
 * Row component for grid layout
56
 * @param xs,sm,md,lg,xl,xxl - Number of columns or auto at each breakpoint
57
 */
58
function Row(props: RowProps): JSX.Element;
59

60
interface RowProps extends React.HTMLAttributes<HTMLElement> {
61
  /** Columns per row at xs breakpoint */
62
  xs?: number | "auto";
63
  /** Columns per row at sm breakpoint */
64
  sm?: number | "auto";
65
  /** Columns per row at md breakpoint */
66
  md?: number | "auto";
67
  /** Columns per row at lg breakpoint */
68
  lg?: number | "auto";
69
  /** Columns per row at xl breakpoint */
70
  xl?: number | "auto";
71
  /** Columns per row at xxl breakpoint */
72
  xxl?: number | "auto";
73
  /** Component used for the root node */
74
  as?: React.ElementType;
75
  /** Bootstrap CSS class prefix */
76
  bsPrefix?: string;
77
}
78
```
79

80
**Usage Examples:**
81

82
```typescript
83
import { Row, Col } from "react-bootstrap";
84

85
// Basic row
86
<Row>
87
  <Col>Column 1</Col>
88
  <Col>Column 2</Col>
89
</Row>
90

91
// Row with responsive column counts
92
<Row xs={1} md={2} lg={4}>
93
  <Col>Item 1</Col>
94
  <Col>Item 2</Col>
95
  <Col>Item 3</Col>
96
  <Col>Item 4</Col>
97
</Row>
98
```
99

100
### Col
101

102
Column component for grid layout with responsive sizing.
103

104
```typescript { .api }
105
/**
106
 * Column component for grid layout
107
 * @param xs,sm,md,lg,xl,xxl - Column width at each breakpoint
108
 */
109
function Col(props: ColProps): JSX.Element;
110

111
interface ColProps extends React.HTMLAttributes<HTMLElement> {
112
  /** Column width at xs breakpoint */
113
  xs?: number | "auto" | { span?: number | "auto"; offset?: number; order?: number };
114
  /** Column width at sm breakpoint */
115
  sm?: number | "auto" | { span?: number | "auto"; offset?: number; order?: number };
116
  /** Column width at md breakpoint */
117
  md?: number | "auto" | { span?: number | "auto"; offset?: number; order?: number };
118
  /** Column width at lg breakpoint */
119
  lg?: number | "auto" | { span?: number | "auto"; offset?: number; order?: number };
120
  /** Column width at xl breakpoint */
121
  xl?: number | "auto" | { span?: number | "auto"; offset?: number; order?: number };
122
  /** Column width at xxl breakpoint */
123
  xxl?: number | "auto" | { span?: number | "auto"; offset?: number; order?: number };
124
  /** Component used for the root node */
125
  as?: React.ElementType;
126
  /** Bootstrap CSS class prefix */
127
  bsPrefix?: string;
128
}
129
```
130

131
**Usage Examples:**
132

133
```typescript
134
import { Row, Col } from "react-bootstrap";
135

136
// Equal width columns
137
<Row>
138
  <Col>Equal width</Col>
139
  <Col>Equal width</Col>
140
  <Col>Equal width</Col>
141
</Row>
142

143
// Specific column widths
144
<Row>
145
  <Col xs={8}>8 columns wide</Col>
146
  <Col xs={4}>4 columns wide</Col>
147
</Row>
148

149
// Responsive columns with objects
150
<Row>
151
  <Col xs={{ span: 12 }} md={{ span: 6, offset: 3 }}>
152
    Responsive column with offset
153
  </Col>
154
</Row>
155

156
// Auto-sized columns
157
<Row>
158
  <Col xs="auto">Auto width based on content</Col>
159
  <Col>Fill remaining space</Col>
160
</Row>
161
```
162

163
### Stack
164

165
Flexbox-based component for creating flexible layouts.
166

167
```typescript { .api }
168
/**
169
 * Stack component for flexbox layouts
170
 * @param direction - Flex direction 
171
 * @param gap - Gap between items
172
 */
173
function Stack(props: StackProps): JSX.Element;
174

175
interface StackProps extends React.HTMLAttributes<HTMLElement> {
176
  /** Flex direction */
177
  direction?: "horizontal" | "vertical";
178
  /** Gap between items (0-5) */
179
  gap?: 0 | 1 | 2 | 3 | 4 | 5;
180
  /** Component used for the root node */
181
  as?: React.ElementType;
182
  /** Bootstrap CSS class prefix */
183
  bsPrefix?: string;
184
}
185
```
186

187
**Usage Examples:**
188

189
```typescript
190
import { Stack, Button } from "react-bootstrap";
191

192
// Vertical stack (default)
193
<Stack gap={3}>
194
  <Button variant="primary">First button</Button>
195
  <Button variant="secondary">Second button</Button>
196
  <Button variant="success">Third button</Button>
197
</Stack>
198

199
// Horizontal stack
200
<Stack direction="horizontal" gap={3}>
201
  <Button variant="primary">Button 1</Button>
202
  <Button variant="secondary">Button 2</Button>
203
  <div className="vr" />
204
  <Button variant="outline-danger">Button 3</Button>
205
</Stack>
206
```