Grid Row (`grid_row`)

Definition
API definition

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, please 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.	`type: boolean`
no_gutters	No 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.	`type: boolean`
col_xs	All (Extra small)		`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	Small		`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	Medium		`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	Large		`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	Extra large		`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`
spacing_margin_bottom	Cols margin bottom		`type: string enum: - mb-0 - mb-1 - mb-2 - mb-3 - mb-4 - mb-5 - mb-auto`

            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, please use bootstrap_grid_row_* layouts.'
homepage: 'https://getbootstrap.com/docs/4.6/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
    no_gutters:
        id: no_gutters
        label: 'No 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: boolean
    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
    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
                    title: 'Card example'
                    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.'
                    body:
                        '@component': button
                        '@variant': primary
                        label: 'Go somewhere'
                -
                    '@component': card
                    title: 'Small card'
                    text: 'Cras justo odio, dapibus ac facilisis in, egestas eget quam.'
                -
                    '@component': card
                    title: 'Card example'
                    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.'
                    body:
                        '@component': button
                        '@variant': primary
                        label: 'Go somewhere'
                -
                    '@component': card
                    title: 'Small card'
                    text: 'Cras justo odio, dapibus ac facilisis in, egestas eget quam.'
            col_md: col-md-3

Preview
Source

Card example

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.

Go somewhere

Small card

Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Card example

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.

Go somewhere

Small card

Cras justo odio, dapibus ac facilisis in, egestas eget quam.

<div class="row"> <div class=" col-md-3 "> <div class="card"> <div class="card-body"> <h5 class="card-title">Card example</h5> <p class="card-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.</p> <span class="btn-primary btn">Go somewhere</span> </div> </div> </div> <div class=" col-md-3 "> <div class="card"> <div class="card-body"> <h5 class="card-title">Small card</h5> <p class="card-text">Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p> </div> </div> </div> <div class=" col-md-3 "> <div class="card"> <div class="card-body"> <h5 class="card-title">Card example</h5> <p class="card-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.</p> <span class="btn-primary btn">Go somewhere</span> </div> </div> </div> <div class=" col-md-3 "> <div class="card"> <div class="card-body"> <h5 class="card-title">Small card</h5> <p class="card-text">Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p> </div> </div> </div> </div>

Grid Row (grid_row)

Card example

Small card

Card example

Small card

Grid Row (`grid_row`)