Stack

Vstack

{% component "Stack" direction="vertical" gap=3 %}
                <div class="p-2">First item</div>
                <div class="p-2">Second item</div>
                <div class="p-2">Third item</div>
            {% endcomponent %}

Preview:

First item
Second item
Third item

Hstack

{% component "Stack" direction="horizontal" gap=3 %}
                <div class="p-2">First item</div>
                <div class="p-2">Second item</div>
                <div class="p-2">Third item</div>
            {% endcomponent %}

Preview:

First item
Second item
Third item

Hstack With Spacer

{% component "Stack" direction="horizontal" gap=3 %}
                <div class="p-2">First item</div>
                <div class="p-2 ms-auto">Second item</div>
                <div class="p-2">Third item</div>
            {% endcomponent %}

Preview:

First item
Second item
Third item

Hstack With Vertical Rule

{% component "Stack" direction="horizontal" gap=3 %}
                <div class="p-2">First item</div>
                <div class="p-2 ms-auto">Second item</div>
                <div class="vr"></div>
                <div class="p-2">Third item</div>
            {% endcomponent %}

Preview:

First item
Second item
Third item

Vstack Buttons

{% component "Stack" direction="vertical" gap=2 %}
                {% component "Button" variant="secondary" %}Save changes{% endcomponent %}
                {% component "Button" variant="secondary" outline=True %}Cancel{% endcomponent %}
            {% endcomponent %}

Preview:

Hstack Inline Form

{% component "Stack" direction="horizontal" gap=3 %}
                {% component "FormControl" placeholder="Add your item here..." attrs:class="me-auto" attrs:aria-label="Add your item here..." / %}
                {% component "Button" variant="secondary" %}Submit{% endcomponent %}
                <div class="vr"></div>
                {% component "Button" variant="danger" outline=True %}Reset{% endcomponent %}
            {% endcomponent %}

Preview:

Vstack No Gap

{% component "Stack" direction="vertical" %}
                <div class="p-2">First item</div>
                <div class="p-2">Second item</div>
                <div class="p-2">Third item</div>
            {% endcomponent %}

Preview:

First item
Second item
Third item

Hstack No Gap

{% component "Stack" direction="horizontal" %}
                <div class="p-2">First item</div>
                <div class="p-2">Second item</div>
                <div class="p-2">Third item</div>
            {% endcomponent %}

Preview:

First item
Second item
Third item