Container

Definition

A container is used to group related elements together, providing consistent styling and layout. It helps in organizing page titles, buttons, filters, and other content in a cohesive manner.

A common use case for a container is to group the page title, buttons, filters, and cards into a unified section.

Example

<h1 class="fs-1 fw-semi-bold mb-4">Recipes</h1>

<div class="mb-3">
    <a class="btn btn-sm btn-primary" href="#">
        <i class="bi bi-plus"></i>
        Add
    </a>
</div>

<form
    class="mb-3"
    x-data="{
        search_recipe() {
            alert('Nothing happens, but imagine in your mind the recipes being filtered!')
        }
    }"
>
    <label>
        <input class="form-control" type="text" placeholder="Search Ingredients...">
    </label>
    <a class="btn btn-sm btn-primary" @click="search_recipe()">
        Search
    </a>
</form>

{% include 'component/item/example_item.html' %}