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 %}
                <button type="button" class="btn btn-secondary">Save changes</button>
                <button type="button" class="btn btn-outline-secondary">Cancel</button>
            {% endcomponent %}

Preview:

Hstack Inline Form

{% component "Stack" direction="horizontal" gap=3 %}
                <input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here...">
                <button type="button" class="btn btn-secondary">Submit</button>
                <div class="vr"></div>
                <button type="button" class="btn btn-outline-danger">Reset</button>
            {% 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