چیدمان فرم‌ها

<div class="mb-3">
    <label for="form-text" class="form-label fs-14 text-dark">نام را وارد کنید</label>
    <input type="text" class="form-control" id="form-text" placeholder="">
</div>
<div class="mb-3">
    <label for="form-password" class="form-label fs-14 text-dark">رمز را وارد کنید</label>
    <input type="password" class="form-control" id="form-password" placeholder="">
</div>
<div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" value="" id="invalidCheck"
        required="">
    <label class="form-check-label" for="invalidCheck">
        Accept Policy
    </label>
</div>
<button class="btn btn-primary" type="submit">تایید</button>

<form>
    <div class="row mb-3">
        <label for="inputEmail3"
            class="col-sm-2 col-form-label">ایمیل</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3">
        </div>
    </div>
    <div class="row mb-3">
        <label for="inputPassword3"
            class="col-sm-2 col-form-label">رمزعبور</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword3">
        </div>
    </div>
    <fieldset class="row mb-3">
        <legend class="col-form-label col-sm-2 pt-0">واجد شرایط</legend>
        <div class="col-sm-10">
            <div class="form-check">
                <input class="form-check-input" type="radio"
                    name="gridRadios" id="gridRadios1" value="option1"
                    checked>
                <label class="form-check-label" for="gridRadios1">
                    مقدمات
                </label>
            </div>
            <div class="form-check disabled">
                <input class="form-check-input" type="radio"
                    name="gridRadios" id="gridRadios2" value="option3"
                    disabled>
                <label class="form-check-label" for="gridRadios2">
                    برق
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                    id="gridCheck1">
                <label class="form-check-label" for="gridCheck1">
                    گواهی شده
                </label>
            </div>
        </div>
    </fieldset>
    <button type="submit" class="btn btn-primary">ورود</button>
</form>

<form>
<div class="mb-3">
    <label for="form-text1" class="form-label fs-14 text-dark">نام خود را وارد کنید</label>
    <div class="input-group">
        <div class="input-group-text"><i class="ri-user-line"></i></div>
        <input type="text" class="form-control" id="form-text1" name="username" placeholder="مثلاً علی رضایی">
    </div>
</div>
<div class="mb-3">
    <label for="form-password1" class="form-label fs-14 text-dark">رمز عبور را وارد کنید</label>
    <div class="input-group">
        <div class="input-group-text"><i class="ri-lock-line"></i></div>
        <input type="password" class="form-control" id="form-password1" name="password" placeholder="رمز عبور">
    </div>
</div>
<div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" value="" id="invalidCheck1" required>
    <label class="form-check-label" for="invalidCheck1">
        قوانین را می‌پذیرم
    </label>
</div>
<button class="btn btn-primary" type="submit">ارسال</button>
</form>

<form>
<div class="row mb-3">
    <label for="inputEmail1" class="col-sm-2 col-form-label">ایمیل</label>
    <div class="col-sm-10">
        <div class="input-group">
            <input type="email" class="form-control" id="inputEmail1" placeholder="مثلاً example@email.com">
            <div class="input-group-text">
                <i class="ri-mail-line"></i>
            </div>
        </div>
    </div>
</div>
<div class="row mb-3">
    <label for="inputPassword1" class="col-sm-2 col-form-label">رمز عبور</label>
    <div class="col-sm-10">
        <div class="input-group">
            <input type="password" class="form-control" id="inputPassword1" placeholder="رمز عبور">
            <div class="input-group-text">
                <i class="ri-lock-line"></i>
            </div>
        </div>
    </div>
</div>
<fieldset class="row mb-3">
    <legend class="col-form-label col-sm-2 pt-0">وضعیت</legend>
    <div class="col-sm-10">
        <div class="form-check">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios4" value="option1" checked>
            <label class="form-check-label" for="gridRadios4">
                مقدماتی
            </label>
        </div>
        <div class="form-check disabled">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
            <label class="form-check-label" for="gridRadios3">
                نهایی
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="gridCheck2">
            <label class="form-check-label" for="gridCheck2">
                تایید شده
            </label>
        </div>
    </div>
</fieldset>
<button type="submit" class="btn btn-primary">ورود</button>
</form>

<form class="row row-cols-lg-auto g-3 align-items-center">
    <div class="col-12">
        <label class="visually-hidden" for="inlineFormInputGroupUsername">نام کاربری</label>
        <div class="input-group">
            <div class="input-group-text">@</div>
            <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="نام کاربری">
        </div>
    </div>
    <div class="col-12">
        <label class="visually-hidden" for="inlineFormSelectPref">ترجیحات</label>
        <select class="form-select" id="inlineFormSelectPref">
            <option selected>انتخاب کنید...</option>
            <option value="1">یک</option>
            <option value="2">دو</option>
            <option value="3">سه</option>
        </select>
    </div>
    <div class="col-12">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="inlineFormCheck">
            <label class="form-check-label" for="inlineFormCheck">مرا به خاطر بسپار</label>
        </div>
    </div>
    <div class="col-12">
        <button type="submit" class="btn btn-primary">ارسال</button>
    </div>
</form>

<div class="row g-3">
    <div class="col-sm-7">
        <input type="text" class="form-control" placeholder="شهر" aria-label="شهر">
    </div>
    <div class="col-sm">
        <input type="text" class="form-control" placeholder="استان" aria-label="استان">
    </div>
    <div class="col-sm">
        <input type="text" class="form-control" placeholder="کد پستی" aria-label="کد پستی">
    </div>
</div>

<div class="row mb-3">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">ایمیل</label>
    <div class="col-sm-10">
        <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
</div>
<div class="row mb-3">
    <label for="colFormLabel" class="col-sm-2 col-form-label">ایمیل</label>
    <div class="col-sm-10">
        <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
</div>
<div class="row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">ایمیل</label>
    <div class="col-sm-10">
        <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
</div>

<div class="mb-3">
    <label for="formGroupExampleInput" class="form-label">برچسب نمونه</label>
    <input type="text" class="form-control" id="formGroupExampleInput"
        placeholder="جایگاه‌نمای ورودی نمونه">
</div>
<div class="mb-1">
    <label for="formGroupExampleInput2" class="form-label">برچسب دیگر</label>
    <input type="text" class="form-control" id="formGroupExampleInput2"
        placeholder="جایگاه‌نمای ورودی دیگر">
</div>

<form class="row gy-2 gx-3 align-items-center mb-4">
    <div class="col-auto">
        <label class="visually-hidden" for="autoSizingInput">نام</label>
        <input type="text" class="form-control" id="autoSizingInput" placeholder="جین دو">
    </div>
    <div class="col-auto">
        <label class="visually-hidden" for="autoSizingInputGroup">نام کاربری</label>
        <div class="input-group">
            <div class="input-group-text">@</div>
            <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="نام کاربری">
        </div>
    </div>
    <div class="col-auto">
        <label class="visually-hidden" for="autoSizingSelect">ترجیحات</label>
        <select class="form-select" id="autoSizingSelect">
            <option selected>انتخاب کنید...</option>
            <option value="1">یک</option>
            <option value="2">دو</option>
            <option value="3">سه</option>
        </select>
    </div>
    <div class="col-auto">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="autoSizingCheck">
            <label class="form-check-label" for="autoSizingCheck">
                مرا به خاطر بسپار
            </label>
        </div>
    </div>
    <div class="col-auto">
        <button type="submit" class="btn btn-primary">ارسال</button>
    </div>
</form>
<span class="fw-medium mb-1 text-muted">می‌توانید با استفاده از کلاس‌های ستونی خاص اندازه، آن را دوباره تنظیم کنید.</span>
<form class="row gx-3 gy-2 align-items-center mt-0">
    <div class="col-sm-3">
        <label class="visually-hidden" for="specificSizeInputName">نام</label>
        <input type="text" class="form-control" id="specificSizeInputName" placeholder="جین دو">
    </div>
    <div class="col-sm-3">
        <label class="visually-hidden" for="specificSizeInputGroupUsername">نام کاربری</label>
        <div class="input-group">
            <div class="input-group-text">@</div>
            <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="نام کاربری">
        </div>
    </div>
    <div class="col-sm-3">
        <label class="visually-hidden" for="specificSizeSelect">ترجیحات</label>
        <select class="form-select" id="specificSizeSelect">
            <option selected>انتخاب کنید...</option>
            <option value="1">یک</option>
            <option value="2">دو</option>
            <option value="3">سه</option>
        </select>
    </div>
    <div class="col-auto">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
            <label class="form-check-label" for="autoSizingCheck2">
                مرا به خاطر بسپار
            </label>
        </div>
    </div>
    <div class="col-auto">
        <button type="submit" class="btn btn-primary">ارسال</button>
    </div>
</form>

<div class="row">
    <div class="col-md-6 mb-3">
        <label class="form-label">First Name</label>
        <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col-md-6 mb-3">
        <label class="form-label">Last Name</label>
        <input type="text" class="form-control" placeholder="Last name">
    </div>
    <div class="col-md-6 mb-3">
        <label class="form-label">Address</label>
        <div class="row">
            <div class="col-xl-12 mb-3">
                <input type="text" class="form-control" placeholder="Street">
            </div>
            <div class="col-xl-12 mb-3">
                <input type="text" class="form-control" placeholder="Landmark">
            </div>
            <div class="col-xxl-6 col-xl-12 mb-3">
                <input type="text" class="form-control" placeholder="City">
            </div>
            <div class="col-xxl-6 col-xl-12 mb-3">
                <select id="inputState1" class="form-select">
                    <option selected>State</option>
                    <option>...</option>
                </select>
            </div>
            <div class="col-xxl-6 col-xl-12 mb-3">
                <input type="text" class="form-control" placeholder="Postal/Zip code">
            </div>
            <div class="col-xxl-6 col-xl-12 mb-3">
                <select id="inputCountry" class="form-select">
                    <option selected>Country</option>
                    <option>...</option>
                </select>
            </div>
        </div>
    </div>
    <div class="col-md-6 mb-3">
        <div class="row">
            <div class="col-xl-12 mb-3">
                <label class="form-label">Email</label>
                <input type="email" class="form-control" placeholder="Email">
            </div>
            <div class="col-xl-12 mb-3">
                <label class="form-label">D.O.B</label>
                <input type="date" class="form-control">
            </div>
            <div class="col-xl-12 mb-3">
                <div class="row">
                    <label class="form-label mb-1">Maritial Status</label>
                    <div class="col-xl-6">
                        <div class="form-check">
                            <input class="form-check-input" type="radio">
                            <label class="form-check-label">Married</label>
                        </div>
                    </div>
                    <div class="col-xl-6">
                        <div class="form-check">
                            <input class="form-check-input" type="radio">
                            <label class="form-check-label">Single</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-12">

            </div>
        </div>
    </div>
</div>

<form class="row g-3 mt-0">
    <div class="col-md-6">
        <label class="form-label">First Name</label>
        <input type="text" class="form-control" placeholder="First name"
            aria-label="First name">
    </div>
    <div class="col-md-6">
        <label class="form-label">Last Name</label>
        <input type="text" class="form-control" placeholder="Last name"
            aria-label="Last name">
    </div>
    <div class="col-md-6">
        <label for="inputEmail4" class="form-label">Email</label>
        <input type="email" class="form-control" id="inputEmail4">
    </div>
    <div class="col-md-6">
        <label for="inputPassword4" class="form-label">Password</label>
        <input type="password" class="form-control" id="inputPassword4">
    </div>
    <div class="col-12">
        <label for="inputAddress" class="form-label">Address</label>
        <input type="text" class="form-control" id="inputAddress"
            placeholder="1234 Main St">
    </div>
    <div class="col-12">
        <label for="inputAddress2" class="form-label">Address 2</label>
        <input type="text" class="form-control" id="inputAddress2"
            placeholder="Apartment, studio, or floor">
    </div>
    <div class="col-md-6">
        <label for="inputCity" class="form-label">City</label>
        <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="col-md-4">
        <label for="inputState" class="form-label">State</label>
        <select id="inputState" class="form-select">
            <option selected>Choose...</option>
            <option>...</option>
        </select>
    </div>
    <div class="col-md-2">
        <label for="inputZip" class="form-label">Zip</label>
        <input type="text" class="form-control" id="inputZip">
    </div>
    <div class="col-12">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="gridCheck3">
            <label class="form-check-label" for="gridCheck3">
                Check me out
            </label>
        </div>
    </div>
    <div class="col-12">
        <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
</form>