Grid Row (grid_row)
The grid system uses a series of containers, rows, and columns to layout and align content For simple use cases only. For more powerful needs, use bootstrap_grid_row_* layouts.
🔗 External documentation.
| ID | Label | Description | Schema |
|---|---|---|---|
| content | Content | The content of each column | |
| with_container | With container? | Is the row wrapped in a container? Containers provide a means to center and horizontally pad your site’s contents. |
|
| gutters | Gutters | The gutters between columns in our predefined grid classes can be removed with .no-gutters. This removes the negative margins from .row and the horizontal padding from all immediate children columns. |
|
| gutters_horizontal | Horizontal gutters | .gx-* classes can be used to control the horizontal gutter widths. The .container or .container-fluid parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. |
|
| gutters_vertical | Vertical gutters | .gy-* classes can be used to control the vertical gutter widths. Like the horizontal gutters, the vertical gutters can cause some overflow below the .row at the end of a page. If this occurs, you add a wrapper around .row with the .overflow-hidden class. |
|
| col_xs | All (Extra small) |
|
|
| col_sm | Small |
|
|
| col_md | Medium |
|
|
| col_lg | Large |
|
|
| col_xl | Extra large |
|
|
| col_xxl | Extra extra large |
|
|
| spacing_margin_bottom | Cols margin bottom |
|
id: grid_row
label: 'Grid Row'
description: 'The grid system uses a series of containers, rows, and columns to layout and align content For simple use cases only. For more powerful needs, use bootstrap_grid_row_* layouts.'
group: Layout
homepage: 'https://getbootstrap.com/docs/5.3/layout/grid/'
slots:
content:
id: content
label: Content
description: 'The content of each column'
props:
with_container:
id: with_container
label: 'With container?'
description: 'Is the row wrapped in a container? Containers provide a means to center and horizontally pad your site’s contents.'
schema:
type: boolean
gutters:
id: gutters
label: Gutters
description: 'The gutters between columns in our predefined grid classes can be removed with .no-gutters. This removes the negative margins from .row and the horizontal padding from all immediate children columns.'
schema:
type: string
enum:
- g-0
- g-1
- g-2
- g-3
- g-4
- g-5
gutters_horizontal:
id: gutters_horizontal
label: 'Horizontal gutters'
description: '.gx-* classes can be used to control the horizontal gutter widths. The .container or .container-fluid parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility.'
schema:
type: string
enum:
- gx-0
- gx-1
- gx-2
- gx-3
- gx-4
- gx-5
gutters_vertical:
id: gutters_vertical
label: 'Vertical gutters'
description: '.gy-* classes can be used to control the vertical gutter widths. Like the horizontal gutters, the vertical gutters can cause some overflow below the .row at the end of a page. If this occurs, you add a wrapper around .row with the .overflow-hidden class.'
schema:
type: string
enum:
- gy-0
- gy-1
- gy-2
- gy-3
- gy-4
- gy-5
col_xs:
id: col_xs
label: 'All (Extra small)'
schema:
type: string
enum:
- col-1
- col-2
- col-3
- col-4
- col-5
- col-6
- col-7
- col-8
- col-9
- col-10
- col-11
- col-12
col_sm:
id: col_sm
label: Small
schema:
type: string
enum:
- col-sm-1
- col-sm-2
- col-sm-3
- col-sm-4
- col-sm-5
- col-sm-6
- col-sm-7
- col-sm-8
- col-sm-9
- col-sm-10
- col-sm-11
- col-sm-12
col_md:
id: col_md
label: Medium
schema:
type: string
enum:
- col-md-1
- col-md-2
- col-md-3
- col-md-4
- col-md-5
- col-md-6
- col-md-7
- col-md-8
- col-md-9
- col-md-10
- col-md-11
- col-md-12
col_lg:
id: col_lg
label: Large
schema:
type: string
enum:
- col-lg-1
- col-lg-2
- col-lg-3
- col-lg-4
- col-lg-5
- col-lg-6
- col-lg-7
- col-lg-8
- col-lg-9
- col-lg-10
- col-lg-11
- col-lg-12
col_xl:
id: col_xl
label: 'Extra large'
schema:
type: string
enum:
- col-xl-1
- col-xl-2
- col-xl-3
- col-xl-4
- col-xl-5
- col-xl-6
- col-xl-7
- col-xl-8
- col-xl-9
- col-xl-10
- col-xl-11
- col-xl-12
col_xxl:
id: col_xxl
label: 'Extra extra large'
schema:
type: string
enum:
- col-xxl-1
- col-xxl-2
- col-xxl-3
- col-xxl-4
- col-xxl-5
- col-xxl-6
- col-xxl-7
- col-xxl-8
- col-xxl-9
- col-xxl-10
- col-xxl-11
- col-xxl-12
spacing_margin_bottom:
id: spacing_margin_bottom
label: 'Cols margin bottom'
schema:
type: string
enum:
- mb-0
- mb-1
- mb-2
- mb-3
- mb-4
- mb-5
- mb-auto
examples:
preview:
id: preview
label: Preview
renderable:
'@component': grid_row
content:
-
'@component': card
'@variant': default
image:
'@element': img
src: 'data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAxLjEyNXJlbTsgdGV4dC1hbmNob3I6IG1pZGRsZTsgdXNlci1zZWxlY3Q6IG5vbmU7IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyNTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IEltYWdlIGNhcCI+PHRpdGxlPlBsYWNlaG9sZGVyPC90aXRsZT48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjODY4ZTk2Ij48L3JlY3Q+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiNkZWUyZTYiIGR5PSIuM2VtIj5JbWFnZSBjYXA8L3RleHQ+PC9zdmc+Cg=='
alt: '© 2017 John Smith photography'
header: Featured
content:
-
'@component': card_body
'@variant': body
title: 'Card title'
subtitle: 'Card subtitle'
text: 'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.'
content:
'@component': button
'@variant': primary
label: 'Go somewhere'
links:
-
'@element': a
'@content': 'Card link'
href: '#'
-
'@element': a
'@content': 'Another link'
href: '#'
footer:
'@element': span
'@content': '2 days ago'
image_position: top
image_col_classes: col-md-4
content_col_classes: col-md-8
-
'@component': card
'@variant': default
image:
'@element': img
src: 'data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAxLjEyNXJlbTsgdGV4dC1hbmNob3I6IG1pZGRsZTsgdXNlci1zZWxlY3Q6IG5vbmU7IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyNTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IEltYWdlIGNhcCI+PHRpdGxlPlBsYWNlaG9sZGVyPC90aXRsZT48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjODY4ZTk2Ij48L3JlY3Q+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiNkZWUyZTYiIGR5PSIuM2VtIj5JbWFnZSBjYXA8L3RleHQ+PC9zdmc+Cg=='
alt: '© 2017 John Smith photography'
header: Featured
content:
-
'@component': card_body
'@variant': body
title: 'Card title'
subtitle: 'Card subtitle'
text: 'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.'
content:
'@component': button
'@variant': primary
label: 'Go somewhere'
links:
-
'@element': a
'@content': 'Card link'
href: '#'
-
'@element': a
'@content': 'Another link'
href: '#'
footer:
'@element': span
'@content': '2 days ago'
image_position: top
image_col_classes: col-md-4
content_col_classes: col-md-8
-
'@component': card
'@variant': default
image:
'@element': img
src: 'data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAxLjEyNXJlbTsgdGV4dC1hbmNob3I6IG1pZGRsZTsgdXNlci1zZWxlY3Q6IG5vbmU7IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyNTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IEltYWdlIGNhcCI+PHRpdGxlPlBsYWNlaG9sZGVyPC90aXRsZT48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjODY4ZTk2Ij48L3JlY3Q+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiNkZWUyZTYiIGR5PSIuM2VtIj5JbWFnZSBjYXA8L3RleHQ+PC9zdmc+Cg=='
alt: '© 2017 John Smith photography'
header: Featured
content:
-
'@component': card_body
'@variant': body
title: 'Card title'
subtitle: 'Card subtitle'
text: 'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.'
content:
'@component': button
'@variant': primary
label: 'Go somewhere'
links:
-
'@element': a
'@content': 'Card link'
href: '#'
-
'@element': a
'@content': 'Another link'
href: '#'
footer:
'@element': span
'@content': '2 days ago'
image_position: top
image_col_classes: col-md-4
content_col_classes: col-md-8
-
'@component': card
'@variant': default
image:
'@element': img
src: 'data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAxLjEyNXJlbTsgdGV4dC1hbmNob3I6IG1pZGRsZTsgdXNlci1zZWxlY3Q6IG5vbmU7IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyNTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IEltYWdlIGNhcCI+PHRpdGxlPlBsYWNlaG9sZGVyPC90aXRsZT48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjODY4ZTk2Ij48L3JlY3Q+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiNkZWUyZTYiIGR5PSIuM2VtIj5JbWFnZSBjYXA8L3RleHQ+PC9zdmc+Cg=='
alt: '© 2017 John Smith photography'
header: Featured
content:
-
'@component': card_body
'@variant': body
title: 'Card title'
subtitle: 'Card subtitle'
text: 'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.'
content:
'@component': button
'@variant': primary
label: 'Go somewhere'
links:
-
'@element': a
'@content': 'Card link'
href: '#'
-
'@element': a
'@content': 'Another link'
href: '#'
footer:
'@element': span
'@content': '2 days ago'
image_position: top
image_col_classes: col-md-4
content_col_classes: col-md-8
gutters: g-0
col_md: col-md-3
Featured
Card title
Card subtitle
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Card link
Featured
Card title
Card subtitle
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Card link
Featured
Card title
Card subtitle
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Card link
Featured
Card title
Card subtitle
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Card link