0
# Layout Components
1

2
Essential components for organizing content and creating responsive layouts using Bootstrap's grid system and flexible containers.
3

4
## Capabilities
5

6
### Container
7

8
A responsive container that wraps content and provides consistent margins and padding across different screen sizes.
9

10
```python { .api }
11
class Container:
12
    """
13
    Responsive container component for wrapping content.
14
    
15
    Args:
16
        children: Child components or content
17
        id (str): Component identifier for callbacks
18
        style (dict): Inline CSS styles
19
        class_name (str): Additional CSS classes
20
        fluid (bool): If True, container spans full width. If False, fixed-width responsive container
21
    """
22
    def __init__(self, children=None, id=None, style=None, class_name=None, fluid=False, **kwargs): ...
23
```
24

25
**Usage Examples:**
26

27
```python
28
import dash_bootstrap_components as dbc
29

30
# Fixed-width responsive container
31
layout = dbc.Container([
32
    html.H1("My Dashboard"),
33
    html.P("This content is contained within responsive margins.")
34
])
35

36
# Full-width fluid container
37
layout = dbc.Container([
38
    html.H1("Full Width Dashboard"),
39
    html.P("This content spans the full width of the viewport.")
40
], fluid=True)
41
```
42

43
### Row
44

45
A flexible row component that contains columns in Bootstrap's grid system, with alignment and justification options.
46

47
```python { .api }
48
class Row:
49
    """
50
    Grid system row component for organizing columns.
51
    
52
    Args:
53
        children: Child components (typically Col components)
54
        id (str): Component identifier for callbacks
55
        style (dict): Inline CSS styles
56
        class_name (str): Additional CSS classes
57
        align (str): Vertical alignment - "start", "center", "end", "stretch", "baseline"
58
        justify (str): Horizontal alignment - "start", "center", "end", "around", "between", "evenly"
59
        no_gutters (bool): Remove gutters between columns
60
    """
61
    def __init__(self, children=None, id=None, style=None, class_name=None, 
62
                 align=None, justify=None, no_gutters=False, **kwargs): ...
63
```
64

65
**Usage Examples:**
66

67
```python
68
import dash_bootstrap_components as dbc
69

70
# Basic row with columns
71
layout = dbc.Row([
72
    dbc.Col("Column 1", width=6),
73
    dbc.Col("Column 2", width=6),
74
])
75

76
# Centered row with custom alignment
77
layout = dbc.Row([
78
    dbc.Col("Left", width=3),
79
    dbc.Col("Center", width=6),
80
    dbc.Col("Right", width=3),
81
], justify="center", align="center")
82

83
# Row with no gutters between columns
84
layout = dbc.Row([
85
    dbc.Col("Seamless Column 1"),
86
    dbc.Col("Seamless Column 2"),
87
], no_gutters=True)
88
```
89

90
### Col
91

92
A responsive column component that works within rows to create flexible grid layouts with breakpoint-specific sizing.
93

94
```python { .api }
95
class Col:
96
    """
97
    Grid system column component with responsive sizing options.
98
    
99
    Args:
100
        children: Child components or content
101
        id (str): Component identifier for callbacks
102
        style (dict): Inline CSS styles
103
        class_name (str): Additional CSS classes
104
        width (int|str): Column width (1-12) or "auto"
105
        xs (int|str): Extra small breakpoint width (<576px)
106
        sm (int|str): Small breakpoint width (≥576px)
107
        md (int|str): Medium breakpoint width (≥768px)
108
        lg (int|str): Large breakpoint width (≥992px)
109
        xl (int|str): Extra large breakpoint width (≥1200px)
110
        xxl (int|str): Extra extra large breakpoint width (≥1400px)
111
        offset (int): Left margin in terms of columns
112
        order (int|str): Visual order of the column
113
    """
114
    def __init__(self, children=None, id=None, style=None, class_name=None, 
115
                 width=None, xs=None, sm=None, md=None, lg=None, xl=None, xxl=None,
116
                 offset=None, order=None, **kwargs): ...
117
```
118

119
**Usage Examples:**
120

121
```python
122
import dash_bootstrap_components as dbc
123

124
# Equal width columns
125
layout = dbc.Row([
126
    dbc.Col("Equal width 1"),
127
    dbc.Col("Equal width 2"),
128
    dbc.Col("Equal width 3"),
129
])
130

131
# Specific width columns (total = 12)
132
layout = dbc.Row([
133
    dbc.Col("25%", width=3),
134
    dbc.Col("50%", width=6),
135
    dbc.Col("25%", width=3),
136
])
137

138
# Responsive columns with different sizes per breakpoint
139
layout = dbc.Row([
140
    dbc.Col("Responsive column", xs=12, sm=6, md=4, lg=3),
141
    dbc.Col("Another responsive column", xs=12, sm=6, md=8, lg=9),
142
])
143

144
# Column with offset and order
145
layout = dbc.Row([
146
    dbc.Col("Second in DOM, first visually", width=4, order=1),
147
    dbc.Col("First in DOM, second visually", width=4, order=2, offset=4),
148
])
149
```
150

151
### Stack
152

153
A flexible stacking component for organizing content vertically or horizontally with configurable spacing.
154

155
```python { .api }
156
class Stack:
157
    """
158
    Flexible stacking layout component using CSS flexbox.
159
    
160
    Args:
161
        children: Child components to stack
162
        id (str): Component identifier for callbacks
163
        style (dict): Inline CSS styles
164
        class_name (str): Additional CSS classes
165
        direction (str): Stack direction - "vertical" (default) or "horizontal"
166
        gap (int): Spacing between stacked items (1-5)
167
    """
168
    def __init__(self, children=None, id=None, style=None, class_name=None, 
169
                 direction="vertical", gap=None, **kwargs): ...
170
```
171

172
**Usage Examples:**
173

174
```python
175
import dash_bootstrap_components as dbc
176

177
# Vertical stack with gap
178
layout = dbc.Stack([
179
    dbc.Button("First Button", color="primary"),
180
    dbc.Button("Second Button", color="secondary"),
181
    dbc.Button("Third Button", color="success"),
182
], gap=3)
183

184
# Horizontal stack
185
layout = dbc.Stack([
186
    dbc.Badge("Badge 1", color="info"),
187
    dbc.Badge("Badge 2", color="warning"),
188
    dbc.Badge("Badge 3", color="danger"),
189
], direction="horizontal", gap=2)
190

191
# Mixed content vertical stack
192
layout = dbc.Stack([
193
    html.H3("Section Title"),
194
    html.P("Some descriptive text about this section."),
195
    dbc.Button("Action Button", color="primary"),
196
    dbc.Alert("Status message", color="info"),
197
], gap=3)
198
```
199

200
## Grid System Usage Patterns
201

202
### Responsive Design
203

204
```python
205
# Mobile-first responsive design
206
layout = dbc.Container([
207
    dbc.Row([
208
        # Full width on mobile, half width on tablet+
209
        dbc.Col([
210
            dbc.Card([
211
                dbc.CardBody("Main content")
212
            ])
213
        ], xs=12, md=8),
214
        # Full width on mobile, quarter width on tablet+
215
        dbc.Col([
216
            dbc.Card([
217
                dbc.CardBody("Sidebar")
218
            ])
219
        ], xs=12, md=4),
220
    ])
221
])
222
```
223

224
### Nested Grids
225

226
```python
227
# Rows and columns can be nested for complex layouts
228
layout = dbc.Container([
229
    dbc.Row([
230
        dbc.Col([
231
            dbc.Row([
232
                dbc.Col("Nested Col 1", width=6),
233
                dbc.Col("Nested Col 2", width=6),
234
            ])
235
        ], width=8),
236
        dbc.Col("Sidebar", width=4),
237
    ])
238
])
239
```
240

241
### Auto-sizing
242

243
```python
244
# Auto-width columns
245
layout = dbc.Row([
246
    dbc.Col("Auto width", width="auto"),
247
    dbc.Col("Fills remaining space"),
248
    dbc.Col("Another auto", width="auto"),
249
])
250
```