Layout

Basic Container

{% component "Container" %}
                Content
            {% endcomponent %}

Preview:

Content

Container Fluid

{% component "Container" fluid=True %}
                Content
            {% endcomponent %}

Preview:

Content

Container Fluid Breakpoint

{% component "Container" fluid="md" %}
                Content
            {% endcomponent %}

Preview:

Content

Basic Row With Cols

{% component "Container" %}
                {% component "Row" %}
                    {% component "Col" %}Column{% endcomponent %}
                    {% component "Col" %}Column{% endcomponent %}
                    {% component "Col" %}Column{% endcomponent %}
                {% endcomponent %}
            {% endcomponent %}

Preview:

Column
Column
Column

Responsive Columns

{% component "Container" %}
                {% component "Row" %}
                    {% component "Col" sm=8 %}col-sm-8{% endcomponent %}
                    {% component "Col" sm=4 %}col-sm-4{% endcomponent %}
                {% endcomponent %}
            {% endcomponent %}

Preview:

col-sm-8
col-sm-4

Mixed Responsive Columns

{% component "Container" %}
                {% component "Row" %}
                    {% component "Col" md=8 %}.col-md-8{% endcomponent %}
                    {% component "Col" col=6 md=4 %}.col-6 .col-md-4{% endcomponent %}
                {% endcomponent %}
            {% endcomponent %}

Preview:

.col-md-8
.col-6 .col-md-4

Row With Gutters

{% component "Container" %}
                {% component "Row" gutter=3 %}
                    {% component "Col" %}Column{% endcomponent %}
                    {% component "Col" %}Column{% endcomponent %}
                {% endcomponent %}
            {% endcomponent %}

Preview:

Column
Column

Row Cols

{% component "Container" %}
                {% component "Row" cols=2 %}
                    {% component "Col" %}Column{% endcomponent %}
                    {% component "Col" %}Column{% endcomponent %}
                    {% component "Col" %}Column{% endcomponent %}
                    {% component "Col" %}Column{% endcomponent %}
                {% endcomponent %}
            {% endcomponent %}

Preview:

Column
Column
Column
Column

Col Auto

{% component "Container" %}
                {% component "Row" %}
                    {% component "Col" %}1 of 3{% endcomponent %}
                    {% component "Col" col="auto" %}Variable width content{% endcomponent %}
                    {% component "Col" %}3 of 3{% endcomponent %}
                {% endcomponent %}
            {% endcomponent %}

Preview:

1 of 3
Variable width content
3 of 3