برچسب‌های شناور

<div class="form-floating mb-3">
                        <input type="email" class="form-control" id="floatingInput"
                            placeholder="name@example.com">
                        <label for="floatingInput">آدرس ایمیل</label>
                    </div>
                    <div class="form-floating">
                        <input type="password" class="form-control" id="floatingPassword"
                            placeholder="رمز عبور">
                        <label for="floatingPassword">رمز عبور</label>
                    </div>

<div class="form-floating mb-3">
                        <input type="email" readonly class="form-control-plaintext"
                            id="floatingEmptyPlaintextInput" placeholder="name@example.com">
                        <label for="floatingEmptyPlaintextInput">ورودی خالی</label>
                    </div>
                    <div class="form-floating">
                        <input type="email" readonly class="form-control-plaintext"
                            id="floatingPlaintextInput" placeholder="name@example.com"
                            value="name@example.com">
                        <label for="floatingPlaintextInput">ورودی با مقدار</label>
                    </div>

<form class="form-floating my-3">
                        <input type="email" class="form-control" id="floatingInputValue"
                            placeholder="name@example.com" value="test@example.com">
                        <label for="floatingInputValue">ورودی با مقدار</label>
                    </form>
                    <form class="form-floatin">
                        <input type="email" class="form-control is-invalid"
                            id="floatingInputInvalid" placeholder="name@example.com"
                            value="test@example.com">
                        <label for="floatingInputInvalid">ورودی نامعتبر</label>
                    </form>

<div class="form-floating mb-4">
                        <textarea class="form-control" placeholder="نظر خود را اینجا وارد کنید"
                            id="floatingTextarea"></textarea>
                        <label for="floatingTextarea">توضیحات</label>
                    </div>
                    <div class="form-floating">
                        <textarea class="form-control" placeholder="نظر خود را اینجا وارد کنید"
                            id="floatingTextarea2" rows="1" disabled=""></textarea>
                        <label for="floatingTextarea2">غیرفعال</label>
                    </div>

<div class="form-floating">
                        <select class="form-select" id="floatingSelect"
                            aria-label="Floating label select example">
                            <option selected>این منو را باز کنید</option>
                            <option value="1">یک</option>
                            <option value="2">دو</option>
                            <option value="3">سه</option>
                        </select>
                        <label for="floatingSelect">سازگار با انتخاب‌گرها</label>
                    </div>

<div class="row g-2">
                        <div class="col-md">
                            <div class="form-floating">
                                <input type="email" class="form-control" id="floatingInputGrid"
                                    placeholder="name@example.com" value="mdo@example.com">
                                <label for="floatingInputGrid">آدرس ایمیل</label>
                            </div>
                        </div>
                        <div class="col-md">
                            <div class="form-floating">
                                <select class="form-select" id="floatingSelectGrid">
                                    <option selected>این منو را باز کنید</option>
                                    <option value="1">یک</option>
                                    <option value="2">دو</option>
                                    <option value="3">سه</option>
                                </select>
                                <label for="floatingSelectGrid">سازگار با انتخاب‌گرها</label>
                            </div>
                        </div>
                    </div>

<div class="row gy-4">
    <div class="col-xl-4">
        <div class="form-floating mb-4 floating-primary">
            <input type="email" class="form-control" id="floatingInputprimary" placeholder="name@example.com">
            <label for="floatingInputprimary">اولیه</label>
        </div>
    </div>
    <div class="col-xl-4">
        <div class="form-floating mb-4 floating-secondary">
            <input type="email" class="form-control" id="floatingInputsecondary" placeholder="name@example.com">
            <label for="floatingInputsecondary">ثانویه</label>
        </div>
    </div>
    <div class="col-xl-4">
        <div class="form-floating mb-4 floating-warning">
            <input type="email" class="form-control" id="floatingInputwarning" placeholder="name@example.com">
            <label for="floatingInputwarning">هشدار</label>
        </div>
    </div>
    <div class="col-xl-4">
        <div class="form-floating mb-4 floating-info">
            <input type="email" class="form-control" id="floatingInputinfo" placeholder="name@example.com">
            <label for="floatingInputinfo">اطلاعات</label>
        </div>
    </div>
    <div class="col-xl-4">
        <div class="form-floating mb-4 floating-success">
            <input type="email" class="form-control" id="floatingInputsuccess" placeholder="name@example.com">
            <label for="floatingInputsuccess">موفقیت‌آمیز</label>
        </div>
    </div>
    <div class="col-xl-4">
        <div class="form-floating mb-4 floating-danger">
            <input type="email" class="form-control" id="floatingInputdanger" placeholder="name@example.com">
            <label for="floatingInputdanger">خطا</label>
        </div>
    </div>
</div>