0
# Layout Components
1

2
Bootstrap's responsive grid system and container components for structuring page layouts with flexible, mobile-first responsive design.
3

4
## Capabilities
5

6
### Container
7

8
Bootstrap container component that provides responsive, centered content areas with automatic margins and padding.
9

10
```javascript { .api }
11
/**
12
 * Bootstrap container component for responsive layouts
13
 * @param props.fluid - Make container full-width (fluid-container) or breakpoint-specific (fluid-sm, fluid-md, etc.)
14
 * @param props.tag - HTML element to render as (default: 'div')
15
 * @param props.className - Additional CSS classes
16
 * @param props.cssModule - CSS Module mapping object
17
 * @param props.children - Child elements to render inside container
18
 */
19
function Container(props: {
20
  fluid?: boolean | string;
21
  tag?: React.ElementType;
22
  className?: string;
23
  cssModule?: object;
24
  children?: React.ReactNode;
25
}): JSX.Element;
26
```
27

28
**Usage Examples:**
29

30
```jsx
31
import { Container } from 'reactstrap';
32

33
// Fixed-width container
34
<Container>
35
  <p>Fixed-width responsive container</p>
36
</Container>
37

38
// Full-width fluid container
39
<Container fluid>
40
  <p>Full-width container</p>
41
</Container>
42

43
// Breakpoint-specific fluid container
44
<Container fluid="md">
45
  <p>Fluid on medium screens and up</p>
46
</Container>
47

48
// Custom element
49
<Container tag="section" className="my-section">
50
  <p>Container as semantic section element</p>
51
</Container>
52
```
53

54
### Row
55

56
Grid row component that creates horizontal groups of columns with proper gutters and alignment.
57

58
```javascript { .api }
59
/**
60
 * Bootstrap grid row component
61
 * @param props.noGutters - Remove gutters between columns (deprecated in Bootstrap 5)
62
 * @param props.form - Apply form-specific styling when row contains form elements
63
 * @param props.tag - HTML element to render as (default: 'div')
64
 * @param props.className - Additional CSS classes
65
 * @param props.cssModule - CSS Module mapping object
66
 * @param props.children - Column components and other child elements
67
 */
68
function Row(props: {
69
  noGutters?: boolean;
70
  form?: boolean;
71
  tag?: React.ElementType;
72
  className?: string;
73
  cssModule?: object;
74
  children?: React.ReactNode;
75
}): JSX.Element;
76
```
77

78
**Usage Examples:**
79

80
```jsx
81
import { Row, Col } from 'reactstrap';
82

83
// Basic row with columns
84
<Row>
85
  <Col>Column 1</Col>
86
  <Col>Column 2</Col>
87
</Row>
88

89
// Form row
90
<Row form>
91
  <Col md={6}>
92
    <FormGroup>
93
      <Label>First Name</Label>
94
      <Input />
95
    </FormGroup>
96
  </Col>
97
  <Col md={6}>
98
    <FormGroup>
99
      <Label>Last Name</Label>
100
      <Input />
101
    </FormGroup>
102
  </Col>
103
</Row>
104

105
// Row without gutters (Bootstrap 4 compatibility)
106
<Row noGutters>
107
  <Col>No gutter column 1</Col>
108
  <Col>No gutter column 2</Col>
109
</Row>
110
```
111

112
### Col
113

114
Grid column component that provides flexible width and responsive behavior within grid rows.
115

116
```javascript { .api }
117
/**
118
 * Bootstrap grid column component
119
 * @param props.xs - Column width for extra small screens (auto, 1-12, or object with size/offset/order)
120
 * @param props.sm - Column width for small screens and up
121
 * @param props.md - Column width for medium screens and up  
122
 * @param props.lg - Column width for large screens and up
123
 * @param props.xl - Column width for extra large screens and up
124
 * @param props.xxl - Column width for extra extra large screens and up
125
 * @param props.tag - HTML element to render as (default: 'div')
126
 * @param props.className - Additional CSS classes
127
 * @param props.cssModule - CSS Module mapping object
128
 * @param props.children - Content to render inside column
129
 */
130
function Col(props: {
131
  xs?: string | number | boolean | { size?: number | string; offset?: number; order?: number };
132
  sm?: string | number | boolean | { size?: number | string; offset?: number; order?: number };
133
  md?: string | number | boolean | { size?: number | string; offset?: number; order?: number };
134
  lg?: string | number | boolean | { size?: number | string; offset?: number; order?: number };
135
  xl?: string | number | boolean | { size?: number | string; offset?: number; order?: number };
136
  xxl?: string | number | boolean | { size?: number | string; offset?: number; order?: number };
137
  tag?: React.ElementType;
138
  className?: string;
139
  cssModule?: object;
140
  children?: React.ReactNode;
141
}): JSX.Element;
142
```
143

144
**Usage Examples:**
145

146
```jsx
147
import { Container, Row, Col } from 'reactstrap';
148

149
// Equal-width columns
150
<Container>
151
  <Row>
152
    <Col>Equal width</Col>
153
    <Col>Equal width</Col>
154
    <Col>Equal width</Col>
155
  </Row>
156
</Container>
157

158
// Specific column sizes
159
<Row>
160
  <Col xs="6" md="4">6 cols on xs, 4 cols on md+</Col>
161
  <Col xs="6" md="8">6 cols on xs, 8 cols on md+</Col>
162
</Row>
163

164
// Auto-sizing columns
165
<Row>
166
  <Col md="auto">Auto-sized content</Col>
167
  <Col>Remaining space</Col>
168
</Row>
169

170
// Advanced column configuration
171
<Row>
172
  <Col md={{ size: 6, offset: 3 }}>
173
    Centered column with offset
174
  </Col>
175
</Row>
176

177
<Row>
178
  <Col md={{ size: 4, order: 2 }}>Second in order</Col>
179
  <Col md={{ size: 4, order: 1 }}>First in order</Col>
180
  <Col md={{ size: 4, order: 3 }}>Third in order</Col>
181
</Row>
182

183
// Responsive breakpoints
184
<Row>
185
  <Col 
186
    xs={12} 
187
    sm={6} 
188
    md={4} 
189
    lg={3} 
190
    xl={2}
191
  >
192
    Responsive column
193
  </Col>
194
</Row>
195
```
196

197
## Layout Patterns
198

199
### Basic Grid Layout
200

201
```jsx
202
import { Container, Row, Col } from 'reactstrap';
203

204
function GridExample() {
205
  return (
206
    <Container>
207
      <Row>
208
        <Col xs="12" md="8">
209
          <h2>Main Content</h2>
210
          <p>Primary content area</p>
211
        </Col>
212
        <Col xs="12" md="4">
213
          <h3>Sidebar</h3>
214
          <p>Secondary content</p>
215
        </Col>
216
      </Row>
217
    </Container>
218
  );
219
}
220
```
221

222
### Responsive Grid with Offsets
223

224
```jsx
225
function ResponsiveGrid() {
226
  return (
227
    <Container>
228
      <Row>
229
        <Col md={{ size: 8, offset: 2 }}>
230
          <h2>Centered Content</h2>
231
          <p>This content is centered with equal margins</p>
232
        </Col>
233
      </Row>
234
      <Row>
235
        <Col sm="5" md="6">Left column</Col>
236
        <Col sm={{ size: 5, offset: 2 }} md={{ size: 6, offset: 0 }}>
237
          Right column with offset on small screens
238
        </Col>
239
      </Row>
240
    </Container>
241
  );
242
}
243
```
244

245
### Form Layout
246

247
```jsx
248
import { Container, Row, Col, Form, FormGroup, Label, Input, Button } from 'reactstrap';
249

250
function FormLayout() {
251
  return (
252
    <Container>
253
      <Form>
254
        <Row form>
255
          <Col md={6}>
256
            <FormGroup>
257
              <Label>First Name</Label>
258
              <Input type="text" />
259
            </FormGroup>
260
          </Col>
261
          <Col md={6}>
262
            <FormGroup>
263
              <Label>Last Name</Label>
264
              <Input type="text" />
265
            </FormGroup>
266
          </Col>
267
        </Row>
268
        <FormGroup>
269
          <Label>Email</Label>
270
          <Input type="email" />
271
        </FormGroup>
272
        <Button color="primary">Submit</Button>
273
      </Form>
274
    </Container>
275
  );
276
}
277
```